Bài viết này LaiXe.Xyz muốn chia sẻ đến các bạn một hiệu ứng hover image rê chuột vào hình ảnh kèm theo caption hoặc mô tả sẽ xuất hiện.
Demo Hover Image có Caption
Eleanor Fant
Which is worse, that everyone has his price, or that the price is always so low.
Eric Widget
I'm killing time while I wait for life to shower me with meaning and happiness.
Will Barrow
The only skills I have the patience to learn are those that have no real application in life.
Mã nguồn
Bước 1: Thêm HTMLMẹo: Bấm nút
để copy code
<figure class="snip1401">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample67.jpg" alt="sample67" />
<figcaption>
<h3>Eleanor Fant</h3>
<p>Which is worse, that everyone has his price, or that the price is always so low.</p>
</figcaption><i class="ion-ios-home-outline"></i>
<a href="#"></a>
</figure>
<figure class="snip1401 hover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample93.jpg" alt="sample93" />
<figcaption>
<h3>Eric Widget</h3>
<p>I'm killing time while I wait for life to shower me with meaning and happiness.</p>
</figcaption><i class="ion-ios-personadd-outline"></i>
<a href="#"></a>
</figure>
<figure class="snip1401"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample87.jpg" alt="sample87" />
<figcaption>
<h3>Will Barrow</h3>
<p>The only skills I have the patience to learn are those that have no real application in life. </p>
</figcaption><i class="ion-ios-location-outline"></i>
<a href="#"></a>
</figure>
@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,800);
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
.snip1401 {
font-family: 'Playfair Display', Arial, sans-serif;
position: relative;
overflow: hidden;
margin: 10px;
min-width: 230px;
max-width: 315px;
max-height: 220px;
width: 100%;
color: #000000;
text-align: right;
font-size: 16px;
background-color: #000000;
}
.snip1401 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
}
.snip1401 img {
max-width: 100%;
backface-visibility: hidden;
}
.snip1401 figcaption {
position: absolute;
top: 0;
bottom: 0;
right: 0;
z-index: 1;
opacity: 1;
padding: 30px 0 30px 10px;
background-color: #ffffff;
width: 40%;
-webkit-transform: translateX(150%);
transform: translateX(150%);
}
.snip1401 figcaption:before {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
right: 100%;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 120px 120px 120px 0;
border-color: transparent #ffffff transparent transparent;
}
.snip1401:after {
position: absolute;
bottom: 50%;
right: 40%;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 120px 120px 0 120px;
border-color: rgba(255, 255, 255, 0.5) transparent transparent transparent;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
}
.snip1401 h3,
.snip1401 p {
line-height: 1.5em;
-webkit-transform: translateX(-30px);
transform: translateX(-30px);
margin: 0;
}
.snip1401 h3 {
margin: 0 0 5px;
line-height: 1.1em;
font-weight: 900;
font-size: 1.4em;
opacity: 0.75;
}
.snip1401 p {
font-size: 0.8em;
}
.snip1401 i {
position: absolute;
bottom: 0;
left: 0;
padding: 20px 30px;
font-size: 44px;
color: #ffffff;
opacity: 0;
}
.snip1401 a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
.snip1401:hover img,
.snip1401.hover img {
zoom: 1;
filter: alpha(opacity=50);
-webkit-opacity: 0.5;
opacity: 0.5;
}
.snip1401:hover:after,
.snip1401.hover:after,
.snip1401:hover figcaption,
.snip1401.hover figcaption,
.snip1401:hover i,
.snip1401.hover i {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
/* Demo purposes only */
$(".hover").mouseleave(
function () {
$(this).removeClass("hover");
}
);
