i put social media icons under image beside title of photo. i.e facebook, twitter, soundcloud , instagram. social media icons rotate image when image hovered over.
html
<div class="polaroid-images"> <a href="" title="alex" ><img height="200" src="alexandra.jpg" alt="island" title="alex" class=fishes /></a> <i class="fa fa-facebook fa-3x"></i> </div> css
.polaroid-images { background: white; display: inline; float: left; margin: 0 15px 70px; padding: 10px 10px 25px; text-align: center; text-decoration: none; -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3); -moz-box-shadow: 0 4px 6px rgba(0,0,0,.3); box-shadow: 0 4px 6px rgba(0,0,0,.3); -webkit-transition: .15s linear; -moz-transition: .15s linear; transition: .15s linear; z-index:0; position:relative; } .polaroid-images a, :after { color: #333; font-size: 20px; content: attr(title); position: relative; top:15px; } .polaroid-images img { display: block; width: inherit; } .polaroid-images a, i:nth-child(3n) { -webkit-transform: rotate(-24deg); -moz-transform: rotate(-24deg); transform: rotate(-24deg); } .polaroid-images a:hover{ -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); transform: scale(1.2); z-index:10; -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, .7); -moz-box-shadow: 0 10px 20px rgba(0,0,0,.7); box-shadow: 0 10px 20px rgba(0,0,0,.7); } .polaroid-images { z-index: 11; padding 30px 25px 15px; margin-right: 10px 22px 30px ; position: absolute; top: 25%; left: 25%; transform: translate(1%, 1%); overflow: hidden; }
just add same transition on hover i. this:
.polaroid-images:hover { -webkit-transition: .15s linear; -moz-transition: .15s linear; transition: .15s linear; } 
Comments
Post a Comment