Hello. There is a slider, but I don’t understand how to implement one like this : hover to the picture: I tried to add one more block to do it opacity: 0, position: absolute for the entire width / height and hang on it : hover but did not work. enter image description here

//Тут заншоу слайды в блок и обворачиваю их item-holder $(whichBlock).append('<div class="item-holder"><div class="slider-item backgorund-image" style="background-image:url(css/images/works/'+worksArray[i].img+'.png")></div></div>'); 
 /*css для холдера*/ .item-holder{ float: left; height: 100%; background-color: black; z-index: 20; } .item-holder:hover{ background-color: rgba(26,188,156, 0.5); }
But during a run, nothing + it is not even visible on top of the map, although it wraps around it: enter image description here

  • Add your own code to the question - Dantessss

1 answer 1

Here are a couple of animation examples. You can do this through :: before, but to insert the plus icon, it’s more convenient to use another internal div.

 .card1 { width: 250px; height: 125px; background-image: url(http://flrec.ifas.ufl.edu/media/flrecifasufledu/images/CarpentariaFruit-500x200.jpg); margin-bottom: 10px; } .card1__inner { content: ""; width: 250px; height: 125px; background-color: rgb(206, 28, 82); opacity: 0; transition: 1s; } .card1:hover .card1__inner { opacity: 0.75; } .card2 { width: 250px; height: 125px; background-image: url(http://flrec.ifas.ufl.edu/media/flrecifasufledu/images/CarpentariaFruit-500x200.jpg); overflow: hidden; position: relative; } .card2__inner { content: ""; position: absolute; top: -125px; width: 250px; height: 125px; background-color: rgb(206, 28, 82); opacity: 0; transition: 1s; } .card2:hover .card2__inner { opacity: 0.75; top: 0; } 
 <div class="card1"> <div class="card1__inner"> Я появился</div> </div> <div class="card2"> <div class="card2__inner"> Я появился</div> </div>