Instagram Hover

Developer
Derek Wheelden
Size
4,031 Kb
Views
44,528
  1. Instagram Hover Previews
  2. Instagram Hover HTML Codes
  3. Instagram Hover CSS Codes
  4. Instagram Hover JS Codes

How do I make an instagram hover?

Could really be used with any image or whatever, but I made it with Instagram photos in mind.. What is a instagram hover? How do you make a instagram hover? This script and codes were developed by Derek Wheelden on 10 August 2022, Wednesday.

Instagram Hover Previews
IQ Test

Instagram Hover - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Instagram Hover</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .instagrams { width: 1000px; margin: 0 auto;
}
.instagram { position: relative; width: 31%; margin: 1%; padding-bottom: 31%; float: left; overflow: hidden;
}
.instagram .user { position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 0 15px; background: #531313; text-overflow: ellipsis;
}
.instagram .user img { position: absolute; top: 15px; right: 15px; width: 70px; border-radius: 200px; vertical-align: middle; box-shadow: 0px 0px 0px 5px #d02f2f; -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s;
}
.instagram .user img:hover { border-radius: 0; box-shadow: none;
}
.instagram .user h1 { width: 70%; margin: 0; font-size: 20px; line-height: 100px; font-weight: 100; color: white; text-align: left;
}
.instagram > img { position: absolute; top: 0; left: 0; width: 100%; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s;
}
.instagram:hover > img { -webkit-filter: grayscale(100%); -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px);
}
.instagram:hover > .user img { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px);
}
* { box-sizing: border-box;
}
body { background: #7d1c1c; font-family: 'Helvetica Neue', helvetica, arial, sans-serif; font-weight: 100; letter-spacing: 2px; color: white; -webkit-backface-visibility: hidden;
}
h1 { font-size: 50px; font-weight: 100; text-align: center; text-transform: uppercase; color: #d02f2f;
}
.cf:before,
.cf:after { content: " "; /* 1 */ display: table; /* 2 */
}
.cf:after { clear: both;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1>Instagram Hoverin&rsquo;</h1>
<div class="instagrams">
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Instagram Hover - Script Codes CSS Codes

.instagrams { width: 1000px; margin: 0 auto;
}
.instagram { position: relative; width: 31%; margin: 1%; padding-bottom: 31%; float: left; overflow: hidden;
}
.instagram .user { position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 0 15px; background: #531313; text-overflow: ellipsis;
}
.instagram .user img { position: absolute; top: 15px; right: 15px; width: 70px; border-radius: 200px; vertical-align: middle; box-shadow: 0px 0px 0px 5px #d02f2f; -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s;
}
.instagram .user img:hover { border-radius: 0; box-shadow: none;
}
.instagram .user h1 { width: 70%; margin: 0; font-size: 20px; line-height: 100px; font-weight: 100; color: white; text-align: left;
}
.instagram > img { position: absolute; top: 0; left: 0; width: 100%; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s;
}
.instagram:hover > img { -webkit-filter: grayscale(100%); -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px);
}
.instagram:hover > .user img { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px);
}
* { box-sizing: border-box;
}
body { background: #7d1c1c; font-family: 'Helvetica Neue', helvetica, arial, sans-serif; font-weight: 100; letter-spacing: 2px; color: white; -webkit-backface-visibility: hidden;
}
h1 { font-size: 50px; font-weight: 100; text-align: center; text-transform: uppercase; color: #d02f2f;
}
.cf:before,
.cf:after { content: " "; /* 1 */ display: table; /* 2 */
}
.cf:after { clear: both;
}

Instagram Hover - Script Codes JS Codes

$instagrams = $('.instagrams');
$.ajax({ type: "GET", url: "https://api.instagram.com/v1/media/popular?client_id=2751b9d3ef1948da8c6eeceefe3fb718&count=3", dataType: "jsonp", success: function (json) { $(json.data).each(function(e) { $instagrams.append( '<div class="instagram">' + '<div class="user">' + '<img src="' + this.user.profile_picture + '" />' + '<h1>' + this.user.full_name + '</h1>' + '</div>' + '<img src="' + this.images.low_resolution.url + '" />' + '</div>' ); }); }
});
Instagram Hover - Script Codes
Instagram Hover - Script Codes
Home Page Home
Developer Derek Wheelden
Username frxnz
Uploaded August 10, 2022
Rating 4.5
Size 4,031 Kb
Views 44,528
Do you need developer help for Instagram Hover?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Derek Wheelden (frxnz) Script Codes
Name
Tile Animation Thing
Folding Panels
Bouncing Border
File Browser Mockup
JavaScript Templates
3D Cube Carousel
Sliding Tab Box Things
Off-Screen Mobile Nav
Drop Caps
Google Maps Geolocation Test
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!