Image Scale on Hover

Developer
Larry Geams Parangan
Size
2,781 Kb
Views
26,312
  1. Image Scale on Hover Previews
  2. Image Scale on Hover HTML Codes
  3. Image Scale on Hover CSS Codes
  4. Image Scale on Hover JS Codes

How do I make an image scale on hover?

I've seen lots of website using this kind of trick, so I want to create my own concept. . What is a image scale on hover? How do you make a image scale on hover? This script and codes were developed by Larry Geams Parangan on 13 September 2022, Tuesday.

Image Scale on Hover Previews
IQ Test

Image Scale on Hover - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Image Scale on Hover</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="hero"> <h1>Image Scale <strong>on Hover</strong> </h1> </div>
<div class="container"> <figure> <img src="https://d13yacurqjgara.cloudfront.net/users/220419/screenshots/1714518/shot-codigo.jpg" alt="Thumb" width="400" height="300" /> <figcaption><div>Thumbnail Caption</div></figcation> </figure> <figure> <img src="https://d13yacurqjgara.cloudfront.net/users/220419/screenshots/1678299/shot-7.jpg" alt="Thumb" width="400" height="300" /> <figcaption><div>Thumbnail Caption</div></figcation> </figure> <figure> <img src="https://d13yacurqjgara.cloudfront.net/users/220419/screenshots/1664639/shot.png" alt="Thumb" width="400" height="300" /> <figcaption><div>Thumbnail Caption</div></figcation> </figure> <figure> <img src="https://d13yacurqjgara.cloudfront.net/users/220419/screenshots/1644214/debut-shot.jpg" alt="Thumb" width="400" height="300" /> <figcaption><div>Thumbnail Caption</div></figcation> </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>

Image Scale on Hover - Script Codes CSS Codes

*, *::before, *::after{ -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
}
html, body{ margin: 0px; padding: 0px; font-family: 'Lato',sans-serif; font-size: 18px; font-weight: 300; height: 100%; color: #fff;
}
.container{ width: 1024px; max-width: 100%; margin: auto; display: block; text-align: center;
}
.hero{ width: 100%; height: 40%; background: #3498db; display: table;
}
h1{ color: #2c3e50; text-align: center; margin: 0; padding: 0; display: table-cell; vertical-align: middle; text-align: center; color: #fff; font-weight: 300;
}
figure{ width: 400px; height: 300px; overflow: hidden; position: relative; display: inline-block; vertical-align: top; border: 5px solid #fff; box-shadow: 0 0 5px #ddd; margin: 1em;
}
figcaption{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; text-align: center; font-weight: bold; width: 100%; height: 100%; display: table;
}
figcaption div{ display: table-cell; vertical-align: middle; position: relative; top: 20px; opacity: 0; color: #2c3e50; text-transform: uppercase;
}
figcaption div:after{ position: absolute; content: ""; left: 0; right: 0; bottom: 40%; text-align: center; margin: auto; width: 0%; height: 2px; background: #2c3e50;
}
figure img{ -webkit-transition: all 0.5s linear; transition: all 0.5s linear; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);
}
figure:hover figcaption{ background: rgba(255,255,255,0.3);
}
figcaption:hover div{ opacity: 1; top: 0;
}
figcaption:hover div:after{ width: 50%;
}
figure:hover img{ -webkit-transform: scale3d(1.2, 1.2, 1); transform: scale3d(1.2, 1.2, 1);
}
/*font-face*/
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 100; src: local('Lato Hairline'), local('Lato-Hairline'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/boeCNmOCCh-EWFLSfVffDg.woff) format('woff');
}
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; src: local('Lato Light'), local('Lato-Light'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/KT3KS9Aol4WfR6Vas8kNcg.woff) format('woff');
}
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; src: local('Lato Regular'), local('Lato-Regular'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/9k-RPmcnxYEPm8CNFsH2gg.woff) format('woff');
}
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; src: local('Lato Bold'), local('Lato-Bold'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/wkfQbvfT_02e2IWO3yYueQ.woff) format('woff');
}

Image Scale on Hover - Script Codes JS Codes

/*
* All images are made by yours trully.
* Follow me on dribbble: https://dribbble.com/larrygeams
*/
Image Scale on Hover - Script Codes
Image Scale on Hover - Script Codes
Home Page Home
Developer Larry Geams Parangan
Username larrygeams
Uploaded September 13, 2022
Rating 4.5
Size 2,781 Kb
Views 26,312
Do you need developer help for Image Scale on 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!

Larry Geams Parangan (larrygeams) Script Codes
Name
Pure CSS Checklist Icon
Just Flat
CSS3 Loading Disk
Sortable Task List
Button Confirmation
CSS3 Accordion
Simple Dot Navigation Style
Window.onload
Click and Hold Button Animation
Drag and Drop
Create amazing Facebook ads 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!