css - how to make a block shift effect when hovering?

Question

Tell me, please, how to make it so that when you hover over a block with an image, it moves and a gradient is superimposed on it?

From the photo you can see that there was a lot of work on this effect .. Maybe look at the source, where there is this effect, and see how) But do not be surprised if the code is there I don’t know 500 lines))
@Anastasiia added an answer, but remember that before posting a question, you should try to solve the problem yourself.
There is a lot of documentation and examples on layout and css.
And already if it is impossible to show how exactly you tried to solve the problem yourself.

Accepted Answer · 2016-10-16T15:32:37

We show the block at hover

* { margin: 0; padding: 0; } img { display: block; width: 100%; height: 100%; } .hover-blind { width: 320px; height: 240px; position: relative; margin: 20px; } .blind { width: 320px; height: 240px; position: absolute; top: 0; left: 0; } .gradient { width: 100%; height: 100%; background: rgba(255, 0, 0, .6)linear-gradient(red, black); position: absolute; top: 0; left: 0; opacity: .7; z-index: 100; display: none; text-align: center; } .gradient p { font-size: 24px; color: 111; line-height: 220px; position: relative; text-transform: uppercase; font-weight: 900; } .gradient p:after { content: ""; display: block; width: 60px; height: 60px; position: absolute; top: 40px; left: 40%; background: url(http://simpleicon.com/wp-content/uploads/multy-user.png); background-size: 100% 100%; } .hover-blind:hover .gradient { display: block; }

 <div class="hover-blind"> <div class="blind"> <img src="http://free4uwallpapers.eu/wp-content/uploads/Computers/hd-wallpaper-computers-mac.jpg" alt="рабочий стол"> </div> <div class="gradient"> <p>super team</p> </div> </div>

With shadow

 * { margin: 0; padding: 0; } img { display: block; width: 100%; height: 100%; } .hover-blind { width: 320px; height: 240px; position: relative; margin: 20px; } .blind { width: 320px; height: 240px; position: absolute; top: 0; left: 0; } .gradient { width: 100%; height: 100%; background: rgba(255, 0, 0, .6)linear-gradient(red, black); position: absolute; top: 0; left: 0; opacity: .7; z-index: 100; display: none; text-align: center; } .gradient p { font-size: 24px; color: 111; line-height: 220px; position: relative; text-transform: uppercase; font-weight: 900; } .gradient p:after { content: ""; display: block; width: 60px; height: 60px; position: absolute; top: 40px; left: 40%; background: url(http://simpleicon.com/wp-content/uploads/multy-user.png); background-size: 100% 100%; } .hover-blind:hover .gradient { display: block; } .shadow { width: 320px; height: 230px; position: absolute; top: 14px; left: 6px; background: rgba(255, 0, 0, .6); z-index: -1; box-shadow: 0 0 6px #9e5a5a; display: none; } .hover-blind:hover .shadow { display: block; }

 <div class="hover-blind"> <div class="blind"> <img src="http://free4uwallpapers.eu/wp-content/uploads/Computers/hd-wallpaper-computers-mac.jpg" alt="рабочий стол"> </div> <div class="gradient"> <p>super team</p> </div> <div class="shadow"></div> </div>

With the desired effect

 * { margin: 0; padding: 0; } img { display: block; width: 100%; height: 100%; } .hover-blind { width: 320px; height: 240px; position: relative; margin: 20px; } .blind { width: 320px; height: 240px; position: absolute; top: 0; left: 0; } .gradient { width: 100%; height: 100%; background: rgba(255, 0, 0, .6)linear-gradient(red, black); position: absolute; top: 0; left: 0; opacity: .7; z-index: 100; display: none; text-align: center; } .gradient p { font-size: 24px; color: 111; line-height: 220px; position: relative; text-transform: uppercase; font-weight: 900; } .gradient p:after { content: ""; display: block; width: 60px; height: 60px; position: absolute; top: 40px; left: 40%; background: url(http://simpleicon.com/wp-content/uploads/multy-user.png); background-size: 100% 100%; } .hover-blind:hover .gradient { display: block; } .hover-blind:hover { left: -7px; top: -6px; } .shadow { width: 320px; height: 230px; position: absolute; top: 14px; left: 6px; background: rgba(255, 0, 0, .6); z-index: -1; box-shadow: 0 0 6px #9e5a5a; display: none; } .hover-blind:hover .shadow { display: block; top: 17px; }

 <div class="hover-blind"> <div class="blind"> <img src="http://free4uwallpapers.eu/wp-content/uploads/Computers/hd-wallpaper-computers-mac.jpg" alt="рабочий стол"> </div> <div class="gradient"> <p>super team</p> </div> <div class="shadow"></div> </div>

@Alex is an example in the sandbox: codepen.io/Geyan/pen/zKJogX?editors=1100

Alex Alex 6,232 five nineteen 29 · Answer 2 · 2016-10-16T15:12:50

 .box { background: #95E1D4; width: 150px; height: 150px; } .box_image { width: 150px; height: 150px; overflow: hidden; } .box_image img { width: 100%; } .box_t { display: none; position: absolute; z-index: 2; width: 150px; height: 150px; background: -moz-linear-gradient(top, rgba(155, 155, 155, 0.65) 0%, rgba(0, 0, 0, 0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(155, 155, 155, 0.65) 0%, rgba(0, 0, 0, 0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(155, 155, 155, 0.65) 0%, rgba(0, 0, 0, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#a69b9b9b', endColorstr='#00000000', GradientType=0); /* IE6-9 */ } .box:hover .box_image { position: absolute; z-index: 1; left: -5px; top: -5px; } .box:hover .box_t { display: block; }

 <div class="box"> <div class="box_image"> <div class="box_t"></div> <img src="https://i.stack.imgur.com/dKLDr.jpg"> </div> </div>

Do you remember all the prefixes to all properties by heart?
I do not understand the point of writing them, I often see that they are being written.
In this case, the gradient is made through an online generator, and there, by default, prefixes are set for different browser versions for cross-browser compatibility.
There is always a share of users with old browsers and if your project targets them you need to prefix them.
Now, many are just doing a stub for older browsers asking them to update the browser, but this is an option.
It was a hint about autoprefixer and other delights of the 21st century ... It’s impossible to remember all the prefixes, in the code, especially in the training examples, it looks crazy, they distract from the meaning with their water and most importantly, you don’t need to know them.
Why not just mention the limitations of old browsers and everything?
@Rolandius never thought it looked wild and comments are usually added, so even for me personally it is not water.
It's impossible to know about everything .. - the main thing is to understand the code, and already the opportunity to know as much as possible.
In addition, for sure, if you write about limitations in older browsers, over time there will be users who will ask in the comments what restrictions are in question and what needs to be added to the code.
I have satisfied my curiosity about such answers, thank you.

css - how to make a block shift effect when hovering?

2 answers 2

More articles: