Minimalist photo showcase with simple hover effect.
Learned from Colt Steele's, "The Web Developer Bootcamp", on Udemy.
A Pen by Anthony Smith on CodePen.
Created
July 22, 2019 07:25
-
-
Save beseidel/240a3cf2b3f091c08417c1d6f94392bb to your computer and use it in GitHub Desktop.
Photography Showcase
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <head> | |
| <link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet"> | |
| </head> | |
| <p>Photography</p> | |
| <img src="http://c1.staticflickr.com/9/8450/8026519634_f33f3724ea_b.jpg"> | |
| <img src="http://c2.staticflickr.com/8/7218/7209301894_c99d3a33c2_h.jpg"> | |
| <img src="http://c2.staticflickr.com/8/7231/6947093326_df216540ff_b.jpg"> | |
| <img src="http://c1.staticflickr.com/9/8788/17367410309_78abb9e5b6_b.jpg"> | |
| <img src="http://c2.staticflickr.com/6/5814/20700286354_762c19bd3b_b.jpg"> | |
| <img src="http://c2.staticflickr.com/6/5647/21137202535_404bf25729_b.jpg"> | |
| <img src="http://c2.staticflickr.com/6/5588/14991687545_5c8e1a2e86_b.jpg"> | |
| <img src="http://c2.staticflickr.com/4/3888/14878097108_5997041006_b.jpg"> | |
| <img src="http://c2.staticflickr.com/8/7579/15482110477_0b0e9e5421_b.jpg"> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| p { | |
| font-family: 'Amatic SC', cursive; | |
| margin-left: 1.66%; | |
| font-size: 40px; | |
| border-bottom: solid 2px #f1f1f1; | |
| width: 30%; | |
| padding-bottom: 40px; | |
| } | |
| img { | |
| width: 30%; | |
| float: left; | |
| margin: 1.66%; | |
| opacity: 0.8; | |
| transition: 200ms; | |
| } | |
| img:hover { | |
| opacity: 1; | |
| box-shadow: 0px 0px 10px black; | |
| transform: scale(1.1); | |
| } | |
| h1 { | |
| margin: 1.66%; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment