Image overlay wilt niet lukken.

**Ronald Boer** · 15-05-2017, 14:40

Hallo webmasters,

Op dit moment ben ik aan het prutsen voor een image overlay. Het einddoel zijn om verschillende panden (in het grijs) te laten oplichten bij een mouse-over en dat er daarbij een tekst verschijnt. Wie weet wat ik hier fout doe?
Ik krijg de panden ook maar niet netjes naast elkaar...

Code:

<!DOCTYPE html>
<html>
<head>
<style>
.container {
    position: relative;
    width: 50%;
}


.image {
  opacity: 1;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}


.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}


.container:hover .image-pand1 {
  background: url("http://i.imgur.com/ei0tuTl.png");
  opacity: 1;
  width: 100%;
  height: 100%;
  transition: .5s ease;
  backface-visibility: hidden;
}


.container:hover .image-pand2 {
  background: url("http://i.imgur.com/ei0tuTl.png");
  opacity: 1;
  width: 100%;
  height: 100%;
  transition: .5s ease;
  backface-visibility: hidden;
}








.container:hover .middle {
  opacity: 1;
}


.text {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}
</style>
</head>
<body>
<div class="container">
  <img src="http://i.imgur.com/ZjSK9Z9.png" alt="Alt-text" class="image-pand1" style="width:100%">
  <div class="middle">
    <div class="text">Pand 1</div>
  </div>
</div>




<div class="container">
  <img src="http://i.imgur.com/ZjSK9Z9.png" alt="Alt-text" class="image=pand2" style="width:100%">
  <div class="middle">
    <div class="text">Pand 2</div>
  </div>
</div>






  
</body>
</html>

Met vriendelijke groet

**Robbin de Kruijf** · 15-05-2017, 14:43

.container een float: left; geven dan komen ze naast elkaar te staan ipv onder elkaar.

**Ferdi Reichart** · 15-05-2017, 14:53

Gebruik flexbox https://www.w3schools.com/css/css3_flexbox.asp

**Ronald Boer** · 15-05-2017, 15:35

Nog steeds krijg ik geen goed image-hover effect....

**Wilbert E.** · 15-05-2017, 15:47

Je gebruikt een class .image maar die class komt nergens terug.

Zet op je 'img' een 'class="image image-pand1" '
Dan ben je al een stap verder ;)

**Ronald Boer** · 15-05-2017, 15:59

Origineel gepost door Wilbert E.

Je gebruikt een class .image maar die class komt nergens terug.

Zet op je 'img' een 'class="image image-pand1" '
Dan ben je al een stap verder ;)

Nu volg ik je niet. Dit werkt ook niet:

<img src="http://i.imgur.com/ZjSK9Z9.png" alt="Alt-text" class="img image-pand2" style="width:100%">

**Wilbert E.** · 15-05-2017, 16:27

Je gebruikt in je css

Code:

.image{
...
}

Je gebruikt nergens

Code:

class="image"

"Zet op je 'img' een 'class="image image-pand1" '

Code:

<img src="http://i.imgur.com/ZjSK9Z9.png" alt="Alt-text" class="image image-pand1" style="width:100%">

(Daarnaast staat er ook class="image=pand2", wat niet goed is)

**Ronald Boer** · 15-05-2017, 16:40

Origineel gepost door Wilbert E.

Je gebruikt in je css

Code:

.image{
...
}

Je gebruikt nergens

Code:

class="image"

"Zet op je 'img' een 'class="image image-pand1" '

Code:

<img src="http://i.imgur.com/ZjSK9Z9.png" alt="Alt-text" class="image image-pand1" style="width:100%">

(Daarnaast staat er ook class="image=pand2", wat niet goed is)

Dat heb ik gedaan, maar alsnog geen effect. Zie mijn huidige code:

Code:

<!DOCTYPE html>
<html>
<head>
<style>
.container {
    position: relative;
    width: 40%;
    float: left; 
}




.image {
  opacity: 1;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}




.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}




.container:hover .image-pand1 {
  background: url("http://i.imgur.com/ei0tuTl.png");
  opacity: 1;
  width: 100%;
  height: 100%;
  transition: .5s ease;
  backface-visibility: hidden;
}




.container:hover .image-pand2 {
  background: url("http://i.imgur.com/ei0tuTl.png");
  opacity: 1;
  width: 100%;
  height: 100%;
  transition: .5s ease;
  backface-visibility: hidden;
}
















.container:hover .middle {
  opacity: 1;
}




.text {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}
</style>
</head>
<body>
<div class="container">
  <img src="http://i.imgur.com/ZjSK9Z9.png" alt="Alt-text" class="image" style="width:100%">
  <div class="middle">
    <div class="text">Pand 1</div>
  </div>
</div>








<div class="container">
  <img src="http://i.imgur.com/ZjSK9Z9.png" alt="Alt-text" class="image-pand2" style="width:100%">
  <div class="middle">
    <div class="text">Pand 2</div>
  </div>
</div>












  
</body>
</html>

**Wilbert E.** · 15-05-2017, 17:00

Vooruit... omdat jij t bent: https://codepen.io/WilbertE/pen/NjzzgQ :)

**Jerry Schouwink** · 15-05-2017, 17:00

Wilbert, je was me voor :)

**Ferdi Reichart** · 15-05-2017, 17:05

Je moet het ook anders opbouwen

<style>.blok-container { width: 100%;}.blok { position: relative; width: 49%; float: left;}
.image { position: absolute; top: 0; left: 0; opacity: 1; width: 100%; height: auto; transition: .5s ease; backface-visibility: hidden;}.middle { transition: .5s ease; opacity: 0; position: absolute; top: 90%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%)}</style>

<div class="blok-container"> <div class="blok"> <img src="http://i.imgur.com/ZjSK9Z9.png" alt="Alt-text" class="image" style="width:100%"> <div class="middle"> <div class="text">Pand 1</div> </div> </div></div>

**Ronald Boer** · 16-05-2017, 08:21

Origineel gepost door Wilbert E.

Vooruit... omdat jij t bent: https://codepen.io/WilbertE/pen/NjzzgQ :)

Ik waardeer je hulp Wilbert!! Dit wat hierboven staat lukt mij ook. Dat bij de hover een groene balk met tekst verschijnt.

Wat mij echter niet lukt is om ook de daadwerkelijke afbeelding ook te veranderen. Op dit moment is de afbeelding: http://i.imgur.com/ZjSK9Z9.png en bij een mouse-over moet dus (naast het groene balkje met tekst) ook de image veranderen naar http://i.imgur.com/ei0tuTl.png

Hopelijk heb ik het nu duidelijker uitgelegd. Excuus voor de onduidelijkheid.

**Wilbert E.** · 16-05-2017, 11:11

Oke, maar als ik het goed zie is de ene afbeelding hetzelfde als de andere alleen dan wat meer doorzichtig. In dat geval is het onnodig om 2 afbeeldingen te maken (en voor de bezoeker te laden). Je kunt gewoon de goede afbeelding gebruiken (http://i.imgur.com/ei0tuTl.png) en daarvan de opacity standaard op 0.3 zetten en bij een hover op 1.

Zie: https://codepen.io/WilbertE/pen/NjzzgQ

Image overlay wilt niet lukken.