Mouse hover effect [closed]

Question

Mouse hover effect [closed]

Navigation

#1 by (4 votes)
#2 by (0 votes)
#3 by (0 votes)
#4 by (-1 votes)

-2

I'd like to know how to do this with the images in CSS. Thank you very much in advance! Website link link

html5 css css3

asked by anonymous 31.12.2017 / 03:36

4 answers

How to make an interactive background? [closed] How to use loop for? [closed]

score 4 · Answer 1

Using :hover , transform , and transition to achieve a 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>

score 0 · Answer 2

You can use the position property to get this effect, here's an example:

.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>

score 0 · Answer 3

Good morning Ana, how are you?

Yes, everything is possible with CSS3.

I think a very cool website for you to get your ideas on is Codepen. I'll send a link of card effects and the link of the site itself. Take a look, you will find many cool content there.

link

I hope I have helped.

Abs

score -1 · Answer 4

Hello, to do this, you only have to create this code and hit the value of margin-left and margin-right . Are you testing until the desired red square is on top of your photo ok?

YOUR PHOTO 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>