Animated Image Hovers

Developer
Nicholas M. Smith
Size
3,687 Kb
Views
34,408
  1. Animated Image Hovers Previews
  2. Animated Image Hovers HTML Codes
  3. Animated Image Hovers CSS Codes
  4. Animated Image Hovers JS Codes

How do I make an animated image hovers?

What is a animated image hovers? How do you make a animated image hovers? This script and codes were developed by Nicholas M. Smith on 27 August 2022, Saturday.

Animated Image Hovers Previews
IQ Test

Animated Image Hovers - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated Image Hovers</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='http://fonts.googleapis.com/css?family=Asap:400,700' rel='stylesheet' type='text/css'>
<div class="container"> <figure class="slide"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5462/Sarracenia_2.jpg" /> <figcaption> <span class="common">Pitcher Plant</span> <span class="latin">Sarracenia purpurea</span> </figcaption> <span class="open">1</span> </figure> <figure class="slide"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5462/sundew.jpg" /> <figcaption> <span class="common">Sundew</span> <span class="latin">Drosera</span> </figcaption> <span class="open">2</span> </figure> <figure class="slide"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5462/vft.jpg" /> <figcaption> <span class="common">Venus Flytrap</span> <span class="latin">Dionaea muscipula</span> </figcaption> <span class="open">3</span> </figure>
</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>

Animated Image Hovers - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { background: #333; padding: 20px 40px;
}
img { max-width: 100%; vertical-align: middle;
}
.container { background: #333; height: auto; margin: 0 auto; width: 80%; max-width: 1050px;
}
@media (min-width: 40em) { .container { width: 100%; }
}
.container::after { content: ""; display: table; clear: both;
}
.slide { height: auto; overflow: hidden; position: relative; width: 100%;
}
@media (min-width: 40em) { .slide { -webkit-backface-visibility: hidden; backface-visibility: hidden; float: left; margin-right: -40px; position: relative; -webkit-transform: skew(6deg); transform: skew(6deg); -webkit-transition: 0.55s; transition: 0.55s; width: 33.33333333333333%; } .slide::after { background: #333; content: ""; height: 100%; opacity: 0.5; position: absolute; top: 0; bottom: 0; left: 0; right: 0; -webkit-transition: 0.55s; transition: 0.55s; width: 100%; }
}
@media (min-width: 40em) { .slide:nth-child(2) { box-shadow: -3px 0 10px 0 rgba(0, 0, 0, 0.5); }
}
@media (min-width: 40em) { .slide:nth-child(3) { box-shadow: -3px 0 10px 0 rgba(0, 0, 0, 0.5); }
}
.slide:hover { margin-right: 0; box-shadow: -3px 0 10px 0 #333;
}
.slide:hover::after { opacity: 0; -webkit-transition: 0.55s; transition: 0.55s;
}
figcaption { background: rgba(0, 0, 0, 0.7); color: white; height: auto; padding: 5px; position: absolute; bottom: 20px; right: 0; -webkit-transition: 0.15s; transition: 0.15s; width: 70%;
}
@media (min-width: 40em) { figcaption { padding: 20px; right: -50%; -webkit-transform: skew(6deg); transform: skew(6deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); }
}
figcaption span { color: #eee; font-family: 'Asap', sans-serif; font-size: 1em; text-shadow: 0 0 2px black;
}
@media (min-width: 40em) { figcaption span { font-size: 1.5em; }
}
@media (min-width: 64em) { figcaption span { font-size: 2em; }
}
.common { display: block;
}
.latin { display: block; font-size: 0.8em; letter-spacing: 0.1em; padding: 5px 0;
}
.open { display: none;
}
@media (min-width: 40em) { .open { background: rgba(0, 0, 0, 0.8); border-radius: 50%; color: white; display: block; font-family: 'Asap', sans-serif; font-size: 4em; height: 100px; line-height: 1.5em; padding: 0 20px; position: absolute; top: 26%; right: 2%; text-shadow: 0 0 2px #333; -webkit-transition: 0.15s; transition: 0.15s; width: 100px; }
}
@media (min-width: 64em) { .open { font-size: 5em; height: 150px; line-height: 1.75em; right: -8%; width: 150px; }
}
@media (min-width: 40em) { .slide:nth-child(3) .open { right: -17%; }
}
@media (min-width: 64em) { .slide:nth-child(3) .open { right: -20%; }
}
.slide:hover .open { right: -50%;
}
@media (min-width: 40em) { .slide:hover figcaption { right: -5%; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: 0.25s 0.2s; transition: 0.25s 0.2s; }
}

Animated Image Hovers - Script Codes JS Codes

// best viewed in full-width / widescreen.
Animated Image Hovers - Script Codes
Animated Image Hovers - Script Codes
Home Page Home
Developer Nicholas M. Smith
Username icutpeople
Uploaded August 27, 2022
Rating 3
Size 3,687 Kb
Views 34,408
Do you need developer help for Animated Image Hovers?

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!

Nicholas M. Smith (icutpeople) Script Codes
Name
HTML5 Video Text Overlay Flexbox
Mobile First Responsive Table
Tooltip
Social Icon Hover Boxes
Blur Image Hovers
Hover Effects
Wordpress 3.8 loader
Responsive 3D Flip Navigation
Flexbox Test
CSS Off Canvas Menu
Create amazing art & images 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!