hướng dẫn sử dụng css3
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (16.35 KB, 3 trang )
<!DOCTYPE html>
<html>
<head>
<title>Hover</title>
<link href=" rel="stylesheet">
<style type="text/css">
*{
padding:0;
margin:0;
}
img {
width: 100%;
height: auto;
transition: all ease-in-out ;
}
.img {
width: 200px;
height: 200px;
position: relative;
background-color:beige;
overflow: hidden;
}
.txt {
width: 20%;
height: 20%;
position: absolute;
bottom:150px;
left: 50px;
align: center;
color: white;
padding:10px;
box-sizing: border-box;
opacity: 0;
}
.img:hover div.txt {
opacity: 1;
transform:translateY(50px);
transition:ease-in-out 0.5s;
}
.vat {
width: 20%;
height: 20%;
position: absolute;
bottom:150px;
right: 50px;
align:center;
color: white;
padding:10px;
box-sizing: border-box;
opacity: 0;
}
.img:hover div.vat {
opacity: 1;
transform:translateY(50px);
transition:ease-in-out 0.5s;
}
.img:hover img {
transform: scale(1.5);
transition: all ease-in-out 0.5s;
}
</style>
</head>
<body>
<div class="container">
<div class="img">
<img src="../../../../xampp/htdocs/clicknow/5d83ad5c7d73cvinh hoa.jpg">
<div class="txt">
<div ><img src="../../../../xampp/htdocs/clicknow/kính.png"></div></a>
</div>
<div class="vat">
</div>
</div>
</body>
</html>
