Hiệu ứng hover slide image siêu đẹp

26/06/2022 13:47 486

Hiệu ứng hover slide image siêu đẹp, hiệu ứng sẽ giống video bên dưới

Sau đây là code:

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hiệu ứng hover slide image siêu đẹp - Code mẫu</title>
  <style>
  .mrtung-out {
    max-width: 1110px;
    margin: 0 auto;
    display: flex;
    flex-flow: row wrap;
}

.block_content {
    flex: 1 1 25%;
    padding: 10px;
}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
}

.effect {
    overflow: hidden;
    position: relative;
    -webkit-transition: all 0.35s ease;
    -moz-transition: all 0.35s ease;
    -ms-transition: all 0.35s ease;
    -o-transition: all 0.35s ease;
    transition: all 0.35s ease;
    text-align: center;
}

.effect a {
    display: block;
    overflow: hidden;
    position: relative;
}

.effect a:before {
    content: "";
    bottom: 0;
    left: 50%;
    right: 51%;
    top: 0;
    filter: alpha(opacity=100);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-opacity: 1;
    -moz-opacity: 1;
    -ms-opacity: 1;
    -o-opacity: 1;
    opacity: 1;
    position: absolute;
    background: rgba(0,0,0,.1) none repeat scroll 0 0;
}

.effect a:after {
    content: "";
    bottom: 50%;
    left: 0;
    right: 0;
    top: 50%;
    filter: alpha(opacity=100);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-opacity: 1;
    -moz-opacity: 1;
    -ms-opacity: 1;
    -o-opacity: 1;
    opacity: 1;
    position: absolute;
    background: rgba(0,0,0,.1) none repeat scroll 0 0;
}

 .effect:hover a:before {
    left: 0;
    right: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-opacity: 0;
    -moz-opacity: 0;
    -ms-opacity: 0;
    -o-opacity: 0;
    opacity: 0;
    -webkit-transition: all 700ms ease-in-out 0s;
    -moz-transition: all 700ms ease-in-out 0s;
    -ms-transition: all 700ms ease-in-out 0s;
    -o-transition: all 700ms ease-in-out 0s;
    transition: all 700ms ease-in-out 0s;
}
 .effect:hover a:after {
    bottom: 0;
    top: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-opacity: 0;
    -moz-opacity: 0;
    -ms-opacity: 0;
    -o-opacity: 0;
    opacity: 0;
    -webkit-transition: all 700ms ease-in-out 0s;
    -moz-transition: all 700ms ease-in-out 0s;
    -ms-transition: all 700ms ease-in-out 0s;
    -o-transition: all 700ms ease-in-out 0s;
    transition: all 700ms ease-in-out 0s;
}
</style>
</head>

<body>
<div class="mrtung-out">

 <div class="block_content">
                <div class=" effect">
                    <a href="#">
                    <img class="img-fluid w-100" src="https://fcwordpress.net/wp-content/uploads/2021/04/4_OnlineCourse-Alex_Crowly.jpg" alt="banner left" title="banner left">
                    </a>
                </div>
            </div>
			<div class="block_content">
                <div class=" effect">
                    <a href="#">
                    <img class="img-fluid w-100" src="https://fcwordpress.net/wp-content/uploads/2021/04/4_OnlineCourse-Alex_Crowly.jpg" alt="banner left" title="banner left">
                    </a>
                </div>
            </div>
			<div class="block_content">
                <div class=" effect">
                    <a href="#">
                    <img class="img-fluid w-100" src="https://fcwordpress.net/wp-content/uploads/2021/04/4_OnlineCourse-Alex_Crowly.jpg" alt="banner left" title="banner left">
                    </a>
                </div>
            </div>
			<div class="block_content">
                <div class=" effect">
                    <a href="#">
                    <img class="img-fluid w-100" src="https://fcwordpress.net/wp-content/uploads/2021/04/4_OnlineCourse-Alex_Crowly.jpg" alt="banner left" title="banner left">
                    </a>
                </div>
            </div>
			</div>
</body>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

<head>

<title>Hiệu ứng hover slide image siêu đẹp - Code mẫu</title>

<style>

.mrtung-out {

max-width: 1110px;

margin: 0 auto;

display: flex;

flex-flow: row wrap;

}

.block_content {

flex: 1 1 25%;

padding: 10px;

}

box-sizing: border-box;

margin: 0;

padding: 0;

}

img {

max-width: 100%;

}

.effect {

overflow: hidden;

position: relative;

-webkit-transition: all 0.35s ease;

-moz-transition: all 0.35s ease;

-ms-transition: all 0.35s ease;

-o-transition: all 0.35s ease;

transition: all 0.35s ease;

text-align: center;

}

.effect a {

display: block;

overflow: hidden;

position: relative;

}

.effect a:before {

content: "";

bottom: 0;

left: 50%;

right: 51%;

top: 0;

filter: alpha(opacity=100);

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

-webkit-opacity: 1;

-moz-opacity: 1;

-ms-opacity: 1;

-o-opacity: 1;

opacity: 1;

position: absolute;

background: rgba(0,0,0,.1) none repeat scroll 0 0;

}

.effect a:after {

content: "";

bottom: 50%;

left: 0;

right: 0;

top: 50%;

filter: alpha(opacity=100);

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

-webkit-opacity: 1;

-moz-opacity: 1;

-ms-opacity: 1;

-o-opacity: 1;

opacity: 1;

position: absolute;

background: rgba(0,0,0,.1) none repeat scroll 0 0;

}

.effect:hover a:before {

left: 0;

right: 0;

filter: alpha(opacity=0);

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

-webkit-opacity: 0;

-moz-opacity: 0;

-ms-opacity: 0;

-o-opacity: 0;

opacity: 0;

-webkit-transition: all 700ms ease-in-out 0s;

-moz-transition: all 700ms ease-in-out 0s;

-ms-transition: all 700ms ease-in-out 0s;

-o-transition: all 700ms ease-in-out 0s;

transition: all 700ms ease-in-out 0s;

}

.effect:hover a:after {

bottom: 0;

top: 0;

filter: alpha(opacity=0);

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

-webkit-opacity: 0;

-moz-opacity: 0;

-ms-opacity: 0;

-o-opacity: 0;

opacity: 0;

-webkit-transition: all 700ms ease-in-out 0s;

-moz-transition: all 700ms ease-in-out 0s;

-ms-transition: all 700ms ease-in-out 0s;

-o-transition: all 700ms ease-in-out 0s;

transition: all 700ms ease-in-out 0s;

}

</style>

</head>

<body>

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</body>

5/5 (1 Đánh giá)

Các bài viết khác có thể hữu ích với bạn

Gửi Phản Hồi

0 Bình Luận

có thể bạn cần xem:

Kỹ thuật css cho checkbox input đẹp hơn [ 05/05/2023 10:32 ]
Css để tăng khoản cách giữa các dot trong border [ 13/12/2022 10:16 ]
Function xử lý upload to media wordpress [ 18/07/2022 11:11 ]
Function tạo rating star sử dụng dashicon từ wordpress [ 03/04/2022 03:02 ]
Css menu vertical danh muc đơn giản [ 20/02/2022 12:40 ]
Html và css section với title, description và card siêu đơn giản [ 17/02/2022 11:22 ]
Hiệu ứng css đẹp transform scale3d [ 10/02/2022 04:05 ]
CSS Animations hoạt động như thế nào [ 14/01/2022 03:49 ]
Cách set size image cùng kích thước không bị vỡ hình với css [ 03/01/2022 03:12 ]
Code phóng to thumbnail khi hover với CSS3 [ 02/01/2022 07:15 ]

Hiệu ứng hover slide image siêu đẹp

có thể bạn cần xem:

Đăng ký nhận bài viết mới

Hướng dẫn thiết kế theme

Thiết kế theme wordpress phần 8

Thiết kế theme wordpress phần 7

Thiết kế theme wordpress phần 6

Thiết kế theme wordpress phần 5

Thiết kế theme wordpress-phần 4

Các functions thường dùng

Function xử lý upload to media wordpress

Function get ip address

Thay thế file_get_contents

Code tích hợp acf vào theme và plugin

Một số function thường dùng khi làm theme wordpress (some functions popular for work do theme worpdress)