Simple and practical and not fancy mouse style

Today I would like to share with you the common use of the mouse slide div style in the website. Give me a thumbs up if you like.

A pure image DIV

HTML code ** (the following effects are centered around this code) **** : **

<div class="lists"> <a href="#" class="box"> <img src="avatar.jpg"> </a> <a href="#" class="box"> <img src="avatar.jpg">  </a> </div>Copy the code

1, slow movement up

Effect:

.lists{ display: flex; margin-top: 100px; justify-content: center; } .box{ width: 200px; height: 200px; The transition: all 0.3 s; } .box~.box{ margin-left: 15px; } .box img{width: 100%; height: 100%; } .box:hover{ transform: translateY(-6px); }Copy the code

2. Amplification effect

Effect:

.lists{ display: flex; margin-top: 100px; justify-content: center; } .box{ width: 200px; height: 200px; The transition: all 0.3 s; } .box~.box{ margin-left: 15px; } .box img{width: 100%; height: 100%; }. Box: hover {transform: scale (1.03); }Copy the code

3. Zoom effect in the frame

Effect:

.lists{ display: flex; margin-top: 100px; justify-content: center; } .box{ width: 200px; height: 200px; overflow:hidden; } .box~.box{ margin-left: 15px; } .box img{ width: 100%; height: 100%; The transition: all 0.5 s; }. Box :hover img{transform: scale(1.1); }Copy the code

4. Mask effect

Effect:

.lists{ display: flex; margin-top: 100px; justify-content: center; } .box{ width: 200px; height: 200px; overflow:hidden; background-color: #4f4f4f; } .box~.box{ margin-left: 15px; } .box img{ width: 100%; height: 100%; The transition: all 0.5 s; }. Box :hover img{opacity: 0.8}Copy the code

Divs below the figure above

HTML code :(the following effects are centered around this code)

<div class="lists"> <a href="#" class="item"> <div class="item_pic"> <img src="avatar.jpg"> </div> <div Class ="item_content"> <div class="title"> <div class="content">Copy the code

1. Zoom in picture + shadow in box

Effect:

.lists{ display: flex; margin-top: 100px; justify-content: center; } .item{ width: 200px; color: #333; text-decoration: none; border: 1px solid #eee; The transition: all 0.5 s; } .item .item_pic{ width: 200px; height: 200px; overflow: hidden; } .item .item_pic img{ width: 100%; height: 100%; The transition: all 0.5 s; }.item:hover. Item_pic img{transform: scale(1.1); }. Item :hover{box-shadow: 0 0 15px rgba(0,0,0,0.2); } .item_content{ padding: 20px 10px; }Copy the code

2, slow slide + shadow

This style is very typical, for example petal net, the activity column that digs gold.

When the div moves up, you can still see the font blurred. You can reduce the font size by one pixel.

Effect:

.lists{ display: flex; margin-top: 100px; justify-content: center; } .item{ width: 200px; color: #333; text-decoration: none; border: 1px solid #eee; The transition: all 0.5 s; margin-right: 20px; } .item .item_pic{ width: 200px; height: 200px; overflow: hidden; } .item .item_pic img{ width: 100%; height: 100%; The transition: all 0.5 s; }. Item :hover{/*-1 or -2 best */ transform: translateY(-1px); Box-shadow: 0 0 15px rgba(0,0,0,0.3); } .item_content{ padding: 20px 10px; }Copy the code

3. Mask effect + text color change + border

Effect:

.lists{ display: flex; margin-top: 100px; justify-content: center; } .item{ width: 200px; color: #333; text-decoration: none; border: 1px solid #eee; margin-right: 20px; The transition: all 0.5 s; } .item .item_pic{ width: 200px; height: 200px; overflow: hidden; background-color: #4f4f4f; } .item .item_pic img{ width: 100%; height: 100%; The transition: all 0.5 s; } .item:hover{ border: 1px solid green; }.item:hover. Item_pic img{opacity: 0.8; } .item:hover .item_content{ color: green; } .item_content{ padding: 20px 10px; The transition: all 0.5 s; }Copy the code

3. Text overlay image DIV

1. I don’t know what to call it, but it looks good

Effect:

HTML code:

<div class="box"> <img SRC ="avatar.jpg" Alt =" Profile picture of Kitty "/> <div class="box2"> <h3> <p> Name of Kitty </p> </div> </div>Copy the code

The CSS code:

.box { position:relative; z-index:1; display:inline-block; overflow:hidden; background:#3085a3; text-align:center; cursor:pointer } .box img { width:200px; height:200px; opacity:1; transition:opacity .35s,transform .35s; float:left; } .box:hover img { opacity:.5; } .box h3 { margin-top:20%; transition:transform .35s; The transform: translate3d (0, 20 px, 0). opacity:0; color:#fff; font-size:16px; } .box p { margin:10px 0 0; padding:15px; border:1px solid #fff; opacity:0; transition:opacity .35s,transform .35s; The transform: translate3d (0, 20 px, 0) scale (1.1); color:#FFF; }. Box :hover h3 {transform:translate3d(0,0,0); opacity:1; } .box:hover p { opacity:1; The transform: translate3d scale (0, 0) (1); } .box2 { width:200px; height:200px; padding:15px; position:absolute; box-sizing: border-box; }Copy the code

2, text slide into

Effect:

HTML code:

<div class="lists"> <div class="item"> <div class="text"> <h1> Title name </h1> <img SRC ="avatar.jpg"> <h2 <p class=" animal-text "> <p class=" animal-text "> Content abstract < / p > < div class = "dots" > < span > < / span > < span > < / span > < span > < / span > < / div > < / div > < / div > < / div >Copy the code

The CSS code:

* { margin: 0; padding: 0; } .lists{ width: 100%; display: flex; justify-content: center; margin-top: 100px; } .item { width: 300px; height: 300px; background-color: #99aeff; position: relative; cursor: pointer; The transition: all 0.4 s ease - out; Box-shadow: 0px 35px 77px-17px Rgba (0, 0, 0, 0.44); overflow: hidden; color: #fff; } .item img { height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 0; The transition: all 0.4 s ease - out; } .item .text { width: 100%; height: 100%; box-sizing: border-box; z-index: 99; position: absolute; padding: 30px; }. Item h1 {text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3); } .item h2 { margin-top: 20px; font-style: italic; transform: translateX(200px); } .item p { margin-top: 20px; line-height: 25px; transform: translateX(-200px); The transition - delay: 0.2 s; } .animate-text { opacity: 0; The transition: all 0.6 s ease - in-out; }. Item :hover {box-shadow: 0px 35px 77px-17px rgba(0, 0, 0, 0.64); The transform: scale (1.05); }. Item :hover img {opacity: 0.2; } .item:hover .animate-text { transform: translateX(0); opacity: 1; } .dots { position: absolute; bottom: 20px; right: 30px; margin: 0 auto; width: 30px; height: 30px; display: flex; flex-direction: column; align-items: center; justify-content: space-around; } .dots span { width: 5px; height: 5px; background-color: #fff; border-radius: 50%; display: block; opacity: 0; Transition: transform 0.4s ease-out, opacity 0.5s ease; transform: translateY(30px); } .item:hover span { opacity: 1; transform: translateY(0px); }. Dots span:nth-child(1) {transition-delay: 0.03s; }. Dots span:nth-child(2) {transition-delay: 0.1s; }. Dots span:nth-child(3) {transition-delay: 0.15s; }Copy the code

3. Slide the button to enter

Effect:

HTML code:

<div class="item"> <img SRC ="avatar.jpg" Alt ="" /> <div class=" BTNS "> <div class="follow"> follow </div> <div </div> </div> </div>Copy the code

The CSS code:

.item{ width: 300px; height: 300px; margin: 100px auto; cursor: pointer; position: relative; } .item img{ width: 100%; height: 100%; background-color: #4f4f4f; position: relative; z-index: 2; } .item:hover .btns{ z-index: 3; } .item .btns{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; Background - color: rgba (0,0,0,0.3); The transition: all 0.6 s; } .follow,.love{ width: 100px; height: 30px; line-height: 30px; text-align: center; border-radius: 4px; The transition: all 0.3 s; font-size: 14px; opacity: 0; background-color: #fff; color: #999; } .item:hover .follow{ transform: translateY(80px); opacity: 1; } .item:hover .love{ transform: translateY(-80px); opacity: 1; } .follow{ position: absolute; left: calc(50% - 50px); top: -30px; } .love{ position: absolute; bottom: -30px; left: calc(50% - 50px); }Copy the code