.container {
position: relative;
width: 100%;
max-width: 300px;
}
.photo {
display: block;
width: 100px;
height: 100px;
transition: all 0.5s ease-in-out;
}
.photo1 {
display: block;
width: 40px;
height: 40px;
transition: all 0.5s ease-in-out;
}
.container1 {
position: relative;
width: 100%;
max-width: 300px;
}
.container2 {
position: relative;
width: 100%;
max-width: 420px;
}
.photo2 {
display: block;
width: 400px;
height: 80px;
transition: all 0.5s ease-in-out;
}
.container3 {
position: relative;
width: 100%;
max-width: 1100px;
}
.photo3 {
display: block;
width: 994px;
height: 160px;
transition: all 0.5s ease-in-out;
}
.container4 {
position: relative;
width: 100%;
max-width: 300px;
}
.photo4 {
display: block;
width: 500px;
height: 261px;
transition: all 0.5s ease-in-out;
}
.container5 {
position: relative;
width: 100%;
max-width: 130;
}
.photo5 {
display: block;
width: 110;
height: 110;
transition: all 0.5s ease-in-out;
}
.btn {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.container:hover .btn {
display: inline-block;
}
.container:hover .photo {
width: 130px;
height: 130px;
}
.container1:hover .btn {
display: inline-block;
}
.container1:hover .photo1 {
width: 60px;
height: 60px;
}
.container2:hover .btn {
display: inline-block;
}
.container2:hover .photo2 {
width: 440px;
height: 88px;
}
.container3:hover .btn {
display: inline-block;
}
.container3:hover .photo3 {
width: 1100px;
height: 180px;
}
.container4:hover .btn {
display: inline-block;
}
.container4:hover .photo4 {
width: 520px;
height: 271px;
}
.container5:hover .btn {
display: inline-block;
}
.container5:hover .photo5 {
width: 130px;
height: 130px;
text-align: center;
}
Reply
Forward