Hover img

Developer
Francois Coron
Size
3,633 Kb
Views
16,192
  1. Hover img Previews
  2. Hover img HTML Codes
  3. Hover img CSS Codes

How do I make an hover img?

What is a hover img? How do you make a hover img? This script and codes were developed by Francois Coron on 08 November 2022, Tuesday.

Hover img Previews
IQ Test

Hover img - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>hover img</title> <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,600,700,900' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper"> <div class="figure"> <div class="figure__pic"><img src="https://images.unsplash.com/reserve/i0SaxRxgRQW47Q9uoPKw_IMG_7279b.jpg?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;s=6a0b677ad80cd02f5c26ea454f3297c8"/></div> <div class="figure__caption"> <div class="figure__caption__title">Salomé Vane</div> <div class="figure__caption__subtitle">Graphic Design</div> <div class="figure__caption__socials"><a href="#"><i class="fa fa-instagram"></i></a><a href="#"><i class="fa fa-twitter"></i></a><a href="#"><i class="fa fa-dribbble"></i></a></div> </div> </div> <div class="figure"> <div class="figure__pic"><img src="https://images.unsplash.com/photo-1445404590072-16ef9c18bd83?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;s=fd0c543e361c825ff48a982da2572625"/></div> <div class="figure__caption"> <div class="figure__caption__title">Salomé Vane</div> <div class="figure__caption__subtitle">Graphic Design</div> <div class="figure__caption__socials"><a href="#"><i class="fa fa-instagram"></i></a><a href="#"><i class="fa fa-twitter"></i></a><a href="#"><i class="fa fa-dribbble"></i></a></div> </div> </div> <div class="figure"> <div class="figure__pic"><img src="https://images.unsplash.com/reserve/i0SaxRxgRQW47Q9uoPKw_IMG_7279b.jpg?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;s=6a0b677ad80cd02f5c26ea454f3297c8"/></div> <div class="figure__caption"> <div class="figure__caption__title">Salomé Vane</div> <div class="figure__caption__subtitle">Graphic Design</div> <div class="figure__caption__socials"><a href="#"><i class="fa fa-instagram"></i></a><a href="#"><i class="fa fa-twitter"></i></a><a href="#"><i class="fa fa-dribbble"></i></a></div> </div> </div> <div class="figure"> <div class="figure__pic"><img src="https://images.unsplash.com/photo-1445404590072-16ef9c18bd83?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;s=fd0c543e361c825ff48a982da2572625"/></div> <div class="figure__caption"> <div class="figure__caption__title">Salomé Vane</div> <div class="figure__caption__subtitle">Graphic Design</div> <div class="figure__caption__socials"><a href="#"><i class="fa fa-instagram"></i></a><a href="#"><i class="fa fa-twitter"></i></a><a href="#"><i class="fa fa-dribbble"></i></a></div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
</body>
</html>

Hover img - Script Codes CSS Codes

/** *Vars */
*,
*::before,
*::after { box-sizing: border-box;
}
body { font-family: "Source Sans Pro", sans-serif;
}
.wrapper { width: 1200px; margin: 40px auto;
}
img { max-width: 100%; height: auto; margin: 0; padding: 0; vertical-align: middle;
}
.figure { position: relative; width: 33.33%; margin: 0; padding: 0; float: left; padding: 10px;
}
.figure:hover .figure__pic img { -webkit-filter: grayscale(70%); filter: grayscale(70%); opacity: .5;
}
.figure:hover .figure__caption__subtitle { -webkit-transform: translateY(-12px); transform: translateY(-12px); opacity: 0;
}
.figure:hover .figure__caption__socials { -webkit-transform: translateY(-12px); transform: translateY(-12px); opacity: 1;
}
.figure__pic { -webkit-transition: 400ms; transition: 400ms; background: #373331;
}
.figure__pic img { -webkit-transition: 400ms; transition: 400ms;
}
.figure__caption { position: absolute; top: 50%; right: 10%; text-align: right; -webkit-transform: translateY(-50%); transform: translateY(-50%);
}
.figure__caption__title { position: relative; z-index: 1; text-transform: uppercase; font-size: 2em; font-weight: bold; color: #FFF;
}
.figure__caption__subtitle { color: #9BF4D5; text-transform: uppercase; -webkit-transition: opacity 100ms, -webkit-transform 400ms; transition: opacity 100ms, -webkit-transform 400ms; transition: transform 400ms, opacity 100ms; transition: transform 400ms, opacity 100ms, -webkit-transform 400ms;
}
.figure__caption__socials { -webkit-transform: translateY(-40px); transform: translateY(-40px); opacity: 0; -webkit-transition: opacity 200ms, -webkit-transform 400ms; transition: opacity 200ms, -webkit-transform 400ms; transition: transform 400ms, opacity 200ms; transition: transform 400ms, opacity 200ms, -webkit-transform 400ms;
}
.figure__caption__socials a { display: inline-block; margin-right: 10px; color: #FFF; -webkit-transition: 200ms; transition: 200ms;
}
.figure__caption__socials a:last-child { margin-right: 5px;
}
.figure__caption__socials a:hover { color: #9BF4D5;
}
Hover img - Script Codes
Hover img - Script Codes
Home Page Home
Developer Francois Coron
Username francoiscoron
Uploaded November 08, 2022
Rating 3
Size 3,633 Kb
Views 16,192
Do you need developer help for Hover img?

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!

Francois Coron (francoiscoron) Script Codes
Name
A Pen by Francois Coron
Reveal footer
UI Quotes
Responsive Nav
Close SVG
Buttons
Typographie
Starter jade
STAR WARS LIGHTSABER
Auto Height textarea
Create amazing sales emails 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!