I need to use css and it :hover to apply a gradient and icon over the image. It should look something like this , but I only get it like this:

 .test { display: block; height: 200px; background: url(http://krolik74.kpeatop.com/hosting.png) no-repeat; width: 588px; } .test:hover { background: linear-gradient(270deg, rgba(0, 188, 240, 0.7) 0%, rgba(5, 42, 64, 0.7) 100%), url(http://krolik74.kpeatop.com/hosting.png) no-repeat; } 
 <div class="test"> </div>

Tell me how to do it please. And maybe there are pictures to insert through html, and not through css?

  • This option was tried <img src="путь-к-файлу" alt="описание"> - Kosta B.
  • Yes of course. This question is relevant only if there is an answer to the question above. How to insert pictures in html I know :) - Yuri Brexston
  • Found the answer :) - Zicrael

2 answers 2

Like this:

 .test { display: block; height: 200px; background: url(http://krolik74.kpeatop.com/hosting.png) no-repeat; width: 400px; position: relative; } .testHover { opacity: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 32px; transition: opacity 1s ease-in-out; background: linear-gradient(270deg, rgba(0, 188, 240, 0.7) 0%, rgba(5, 42, 64, 0.7) 100%), url(http://krolik74.kpeatop.com/hosting.png) no-repeat; } .test:hover .testHover { opacity: 1; } 
 <link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet"/> <div class="test"> <div class='testHover'> <i class="fas fa-link"></i> </div> </div>

PS for the icon, I used the font-awesome link to it:

Link

    Thanks to Zicrael (thank you) I have worked out the way I wanted. To the pictures were in html, not css.

      <div class="container"> <img src="http://ipic.su/img/img7/fs/hosting.1526023725.png" alt="Avatar" class="image" style="width:100%"> <div class="middle"> <div class="text"> <div class="union"></div> </div> </div> </div> .container { position: relative; width: 600px; } .image { opacity: 1; display: block; width: 100%; height: auto; transition: .5s ease; backface-visibility: hidden; } .middle { transition: .5s ease; opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center; } .container:hover .image { /*opacity: 0.5; */ } .container:hover .middle { opacity: 1; } .text { font-size: 16px; width: 600px; height: 208px; background: linear-gradient(270deg, rgba(0, 188, 240, 0.7) 0%, rgba(5, 42, 64, 0.7) 100%) no-repeat; } .union { background: url(http://ipic.su/img/img7/fs/Union.1526023689.png) center no-repeat; width: 100%; height: 100%; }
    • So I would say, I would edit as needed :) - Zicrael