Effect when passing the mouse

Question

I’d like to know how to do this with the images in CSS. Thanks in advance! Website link http://demo.athemes.com/sydney/

Answer 1

Using the :hover, transform and a transition to achieve a very similar effect:

.fundo{
background:#e3e3e3;
width:200px;
height:300px;
padding:5px;
background-image:url(https://s-media-cache-ak0.pinimg.com/originals/f2/40/24/f24024aec1447cdb0418bbc8d349ec6c.jpg);
background-position:center;
background-size:cover;
}

.frente{
  opacity:0;
  width:100%;
  height:100%;
  background:#d65050;
  color:#fff;
  transition: all .2s;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  transform: scale(0.9);
  font-family:verdana;

}

.frente:hover{
  opacity:1;
  transform: scale(1);
}

<div class="fundo">
  <div class="frente">
    <h2>Nome</h2>
    <p>Descrição</p>
  </div>
</div>

Answer 2

Good morning Ana, all right?

Yes, anything can be done with CSS3.

I think a very nice site for you to get your ideas is Codepen. I’ll send you a card effect link and a link from the site itself. Take a look, you’ll find lots of cool content there.

https://codepen.io/itbruno/pen/gvEtl

https://codepen.io

I hope I’ve helped.

Abs

Answer 3

You can use the property position to achieve this, an example follows::

.team {
  position: relative;
}

.team__img { 
  height: auto;
  width: 100%;
}

.team__detail {
  background-color: #000;
  color: #FFF;
  height: 100%;
  opacity: 0.5;
  position: absolute;
  top: 0;
  visibility: hidden;
  width: 100%;
  z-index: 10;
}

.team:hover .team__detail { visibility: visible; }

<div class="team">
  <img src="https://i.pinimg.com/736x/49/91/58/499158d23cd845e7a95d3fe46f173f28--rick-y-morty-fondos-rick-and-morty.jpg" alt="" class="team__img">
  <div class="team__detail">
    content
  </div>
</div>

Answer 4

Hello to do this is just you create this code and go settling the value of margin-left and margin-right. You will test until the desired red square is on top of your photo ok?

YOUR PICTURE HERE

<img src='suaimagem.html' style='width:300px; height:300px; '/>

<div class='quadrovermelho' style='position:absolute; width:300px; height:300px; background-color:red; opacity:0.6; margin-left:vcvaiajustando; margin-top:vcvaiajustando; '></div>