CodePen Home Image zoom on hover - auto run - view (ok)
Ví dụ 1:
C:\xampp\htdocs\test\index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Document</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="wrapper">
<div class="parent">
<div class="child bg-one">
<a href="#">Los Angeles</a>
</div>
</div>
<div class="parent right">
<div class="child bg-two">
<a href="#">London</a>
</div>
</div>
<div class="parent">
<div class="child bg-three">
<a href="#">New York</a>
</div>
</div>
<div class="parent right">
<div class="child bg-four">
<a href="#">Hollywood</a>
</div>
</div>
<div class="parent">
<div class="child bg-five">
<a href="#">Dubai</a>
</div>
</div>
<div class="parent right">
<div class="child bg-six">
<a href="#">San Francisco</a>
</div>
</div>
</div>
</body>
</html>C:\xampp\htdocs\test\style.css
/* Global Styling */
html,
body {
margin: 0px;
padding: 0px;
}
nav {
background-color: #34495e;
height: 80px;
position: fixed;
width: 100vw;
top: 0;
z-index: 999;
}
#logo {
height: 80px;
margin-left: 20px;
}
.wrapper {
padding: 50px 50px;
max-width: 1200px;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 80px;
}
.right {
float: right !important;
}
/* Image zoom on hover + Overlay colour */
.parent {
width: 45%;
margin: 20px;
height: 300px;
border: 1px solid blue;
overflow: hidden;
position: relative;
float: left;
display: inline-block;
cursor: pointer;
}
.child {
height: 100%;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
/* Several different images */
.bg-one {
background-image: url(https://media.timeout.com/images/101602611/image.jpg);
}
.bg-two {
background-image: url(http://s1.it.atcdn.net/wp-content/uploads/2015/08/2-London.jpg);
}
.bg-three {
background-image: url(https://media.timeout.com/images/101484105/image.jpg);
}
.bg-four {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/00/Hollywood_Sign.jpg/1280px-Hollywood_Sign.jpg);
}
.bg-five {
background-image: url(http://www.travelandleisure.com/sites/default/files/styles/tnl_redesign_article_landing_page/public/1453920892/DUBAI-554088081-ABOVE0116.jpg?itok=dcoZnCrc);
}
.bg-six {
background-image: url(http://www.travelandleisure.com/sites/default/files/styles/tnl_redesign_article_landing_page/public/1453920892/DUBAI-554088081-ABOVE0116.jpg?itok=dcoZnCrc);
}
a {
display: none;
font-size: 35px;
color: #ffffff !important;
font-family: sans-serif;
text-align: center;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 50px;
cursor: pointer;
/*text-decoration: none;*/
}
.parent:hover .child,
.parent:focus .child {
-ms-transform: scale(1.2);
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.parent:hover .child:before,
.parent:focus .child:before {
display: block;
}
.parent:hover a,
.parent:focus a {
display: block;
}
.child:before {
content: "";
display: none;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(52, 73, 94, 0.75);
}
/* Media Queries */
@media screen and (max-width: 960px) {
.parent {
width: 100%;
margin: 20px 0px
}
.wrapper {
padding: 20px 20px;
}
}
.hello {
display: none
}Ví dụ 2:
C:\xampp\htdocs\test\index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Latest compiled and minified CSS & JS -->
<script src="https://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
function isScrolledIntoView(elem) {
if ($(elem).length == 0) {
return false;
}
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
// return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); //try it, will only work for text
return (docViewBottom >= elemTop && docViewTop <= elemBottom);
}
$(window).on('scroll', function() {
$('.noidung').each(function() {
if(isScrolledIntoView(this)) {
$(this).addClass('active');
}
});
});
</script>
<title>Document</title>
</head>
<body>
<!--Niềm Vui Lập Trình-->
<h4>Hiệu Ứng Zoom In</h4>
<p class="p">Bạn hãy hover vào ảnh bên dưới nhé</p>
<div class="zoomin noidung">
<img src="https://res.cloudinary.com/dn4nxz7f0/image/upload/v1597819923/y2mnobp2xxbujtf2ptsf.jpg" title="Hiệu Ứng Zoom in" />
</div>
</body>
</html>C:\xampp\htdocs\test\style.css
p {
height: 1200px;
}
.noidung {
height: 200px;
width: 200px;
overflow: hidden;
}
.zoomin img {
height: 200px;
width: 200px;
transition-property: all;
transition-duration: 2s;
transition-timing-function: ease;
transition-delay: 0.5s;
}
.zoomin.active img {
transform: scale(1.5);
}Last updated
Was this helpful?