How to realize this effect when hovering? Picture inserted with img tag enter image description here enter image description here

    3 answers 3

    For the link icon, I used the Font-Awesome icon, but in principle you can also set it with a picture or use your own icon font.

    *, *:before, *:after{ box-sizing:border-box; } .img-link{ display:block; width:200px; height:200px; border:7px solid #fff; box-shadow:0 0 1px 1px gray; border-radius:50%; background:linear-gradient(145deg,#4a35c5,#ba13c5); position:relative; color:transparent; transition:all .5s ease; } .img-link:before{ content:'\f0c1'; font-family:fontAwesome; font-size:40px; line-height:1; position:absolute; top:calc(50% - .5em); left:calc(50% - .5em); z-index:2; } .img-link img{ display:block; width:100%; height:100%; border-radius:inherit; object-fit:cover; object-position:center; transition:inherit; } .img-link:hover{ color:#fff; } .img-link:hover img{ opacity:.4; } 
     <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <a href="#" class="img-link"> <img src="https://s1.gifyu.com/images/rbt-spa-massage-hand-foot-reflex-410-a.jpg" alt=""/> </a>

    • Ideal, thank you, put the daw)) - Walter Scott

    In this way:

     .wrapper { position: relative; } .hoverEffect { position: absolute; opacity: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24px; transition: opacity 1s ease-in-out; top: 0; left: 0; margin: 6px; background-color: rgba(128,0,128, 0.6); } .wrapper img { border: 1px solid #a0522d; padding: 5px; } .wrapper , .wrapper img , .hoverEffect { border-radius: 100%; height: 175px; width: 175px; } .wrapper:hover .hoverEffect { opacity: 1; } 
     <div class='wrapper'> <img src="https://i2.wp.com/beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg?resize=640%2C426" alt="image"> <div class='hoverEffect'> Icon<!-- тут вставить icon --> </div> </div>

    • Thanks so much) - Walter Scott

    1. You can impose a mask and hide it opacity: 0; and when you hover, show with a certain degree of transparency.

    2. It is better to draw 2 pictures in 1 file to load 1 with backgroud-postiion from the beginning of the upper left point and set the size so that its 2nd part was not visible, and when hovering, to do an offset of the picture with the same backgroud-postiion as a result, the user will not understand that this is one big picture just when you hover it the other part is shown.