Show Image Hover Mouse

Question

Show Image Hover Mouse

Asked 5 years, 8 months ago

Viewed 36 times

1

You would need to show an image when passing the mouse, what would be the best way to do it?

Follow my code:

.scenario {

      position: relative;
      margin: auto;
      width: 400px;
      height: 400px;
      background-image: url(https://image.freepik.com/vetores-gratis/fundo-da-floresta-outonal-com-os-animais-adoraveis_23-2147565993.jpg);
      background-position:center;
      background-size: cover;
      background-repeat: no-repeat;
  }

.scenario a {
    opacity:0;
}

.scenario a:hover {
  opacity:1;

}
.scenario a + a {
    border-radius: 50%;
    background-color: rgba(0, 255, 0, .5);
    transform: rotate(-12deg);
    opacity:0;
}

.scenario a + a:hover {
  opacity:1;

}

.scenario a + a + a {
  border-radius: 50%;
  background-color: rgba(0, 255, 0, .5);
  transform: rotate(-12deg);
  opacity:0;

}

.scenario a + a + a:hover {
  opacity:1;

}

.modalDialog {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.8);
  z-index: 99999;
  opacity:0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}

.modalDialog:target {
  opacity:1;
  pointer-events: auto;
}


.modalDialog > div {
  width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  border-radius: 10px;
  background: #fff;
}


.closeModal {
  background: #606061;
  color: #FFFFFF;
  line-height: 25px;
  position: absolute;
  right: -12px;
  text-align: center;
  top: -10px;
  width: 24px;
  text-decoration: none;
  font-weight: bold;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -moz-box-shadow: 1px 1px 3px #000;
  -webkit-box-shadow: 1px 1px 3px #000;
  box-shadow: 1px 1px 3px #000;
}


.closeModal:after {
  content: "\d7";
}


.closeModal:hover {
  background: #f00;
}

<div class="scenario">
<a href="#openModal" title="" style="position: absolute; left: 58.75%; top: 15%; width: 9.5%; height: 7.75%; z-index: 2;"></a>
<a href="#openModal2" title="" style="position: absolute; left: 45.5%; top: 77%; width: 8.5%; height: 9.25%; z-index: 2;"></a>
<a href="#openModal3" title="" style="position: absolute; left: 40.5%; top: 37%; width: 8.5%; height: 9.25%; z-index: 2;"></a>
</div>
<div id="openModal" class="modalDialog">
  <div>
    <a href="#close" title="Close" class="closeModal"></a>
    <!-- Conteúdo do Modal -->
    <h2>Ovo de Coelho</h2>
    <p>PEGUE SEU CUPOM</p>
    <hr>
    <!-- Conteúdo do Modal -->
  </div>
</div>
<div id="openModal2" class="modalDialog">
  <div>
    <a href="#close" title="Close" class="closeModal"></a>
    <!-- Conteúdo do Modal -->
    <h2>Ovo de Coelho 2</h2>
    <p> PEGUE SEU CUPOM</p>
    <hr>
    <!-- Conteúdo do Modal -->
  </div>
</div>
<div id="openModal3" class="modalDialog">
  <div>
    <a href="#close" title="Close" class="closeModal"></a>
    <!-- Conteúdo do Modal -->
    <h2>Ovo de Coelho</h2>
    <p>PEGUE SEU CUPOM</p>
    <p><a target="_blank" href="#">Clique Aqui</a></p>
    <hr>
    <!-- Conteúdo do Modal -->
  </div>
</div>

You want an image to appear where the green ball is? Like instead of appearing the green ball will appear an image is this?

– hugocsl

2019/04/06 at 11:16
Yeah, that’s right.

– JVEUZEBIO

2019/04/07 at 12:28

1 answer

Browser other questions tagged css css-hover

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2019-04-07T12:48:17+00:00

It’s basically putting a background-image with the egg in the elements you want to show

Follow the image code above

.scenario {

    position: relative;
    margin: auto;
    width: 400px;
    height: 400px;
    background-image: url(https://image.freepik.com/vetores-gratis/fundo-da-floresta-outonal-com-os-animais-adoraveis_23-2147565993.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.scenario a {
    opacity: 0;
}

.scenario a:hover {
    opacity: 1;

    background-image: url(https://images.vexels.com/media/users/3/162120/isolated/lists/c85115745d0274227f0b4832a3f3f4d5-egg-easter-painted-easter-egg-easter-egg-pattern-spot-flat.png);
    background-size: contain;
    background-repeat: no-repeat;

}

.scenario a+a {
    border-radius: 50%;
    transform: rotate(-12deg);
    opacity: 0;
}

.scenario a+a:hover {
    opacity: 1;
    background-image: url(https://pngimage.net/wp-content/uploads/2018/05/easter-egg-png.png);
    /* background-color: rgba(0, 255, 0, .5); */
}

.scenario a+a+a:hover {
    border-radius: 50%;
    background-image: url(https://i.pinimg.com/originals/79/dd/c9/79ddc97ba6149835adcd81ab1ffddb4d.png);
    /* background-color: rgba(0, 255, 0, .5); */
    transform: rotate(-12deg);
    opacity: 0;

}

.scenario a+a+a:hover {
    opacity: 1;

}

.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    opacity: 0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}

.modalDialog:target {
    opacity: 1;
    pointer-events: auto;
}


.modalDialog>div {
    width: 400px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
}


.closeModal {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}


.closeModal:after {
    content: "\d7";
}


.closeModal:hover {
    background: #f00;
}

<div class="scenario">
    <a href="#openModal" title=""
        style="position: absolute; left: 58.75%; top: 15%; width: 9.5%; height: 7.75%; z-index: 2;"></a>
    <a href="#openModal2" title=""
        style="position: absolute; left: 45.5%; top: 77%; width: 8.5%; height: 9.25%; z-index: 2;"></a>
    <a href="#openModal3" title=""
        style="position: absolute; left: 40.5%; top: 37%; width: 8.5%; height: 9.25%; z-index: 2;"></a>
</div>
<div id="openModal" class="modalDialog">
    <div>
        <a href="#close" title="Close" class="closeModal"></a>
        <!-- Conteúdo do Modal -->
        <h2>Ovo de Coelho</h2>
        <p>PEGUE SEU CUPOM</p>
        <hr>
        <!-- Conteúdo do Modal -->
    </div>
</div>
<div id="openModal2" class="modalDialog">
    <div>
        <a href="#close" title="Close" class="closeModal"></a>
        <!-- Conteúdo do Modal -->
        <h2>Ovo de Coelho 2</h2>
        <p> PEGUE SEU CUPOM</p>
        <hr>
        <!-- Conteúdo do Modal -->
    </div>
</div>
<div id="openModal3" class="modalDialog">
    <div>
        <a href="#close" title="Close" class="closeModal"></a>
        <!-- Conteúdo do Modal -->
        <h2>Ovo de Coelho</h2>
        <p>PEGUE SEU CUPOM</p>
        <p><a target="_blank" href="#">Clique Aqui</a></p>
        <hr>
        <!-- Conteúdo do Modal -->
    </div>
</div>