CODEWITHSUNDEEP
htmlcsstransitionduration
Johannes Mark
Johannes Mark

Reputation: 3

CSS transition duration with div doesnt work

I was trying to make a hover thing, until I hover the image, the image should change into another image.. I successfully did it until I wanted to make a transistion duration and I was really confused why it didn't worked..

#Bild-Rechts {
    background: url(bilder/Hintergrund-2.jpg) no-repeat;
    width: 605px;
    height:886px;
    float: right;
}

#Bild-Rechts:hover {
    background: url(bilder/HintergrundHover.jpg) no-repeat;
    transition-duration: 2000ms;
}
<section id="elektro_One">
    <div class="Box-Top"></div>
    <div id="Bild-Rechts"></div>
    <div id="Text-Middle-2">
        <h3>Wer sind wir?</h3>
	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata.</p>
    </div>
</section>

Upvotes: 0

Views: 76

Answers (4)

Martin
Martin

Reputation: 16423

You would be better setting the transition on the main element rather than the hover psuedo-class.

See the below working snippet that uses images from placeholder.com:

#Bild-Rechts {
  background: url(https://via.placeholder.com/150) no-repeat;
  width:      605px;
  height:     886px;
  float:      right;
  transition: background 2000ms;
}

#Bild-Rechts:hover {
  background: url(https://via.placeholder.com/200) no-repeat;
}
<section id="elektro_One">
  <div class="Box-Top"></div>
  <div id="Bild-Rechts"></div>
  <div id="Text-Middle-2">
    <h3>Wer sind wir?</h3>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata.</p>
  </div>
</section>

Edit following OP comment about Firefox

Firefox doesn't actually support background image transitions because they are not explicitly defined in the CSS transitions spec. You can explicitly see what is included here.

There are some suggested work-arounds which include layering two elements on top of each other and then fading the top one out to show the lower one - not elegant but may be the only choice in this circumstance.

Upvotes: 1

Banzay
Banzay

Reputation: 9470

It's better to separate background attributes and set transition for unhovered selector

#Bild-Rechts	{
  background-image: url("https://via.placeholder.com/150/0000FF");
  background-repeat: no-repeat;
  background-size: cover;
  width: 160px;
  height: 160px;
  float: right;
  transition-duration: 1s;
}

#Bild-Rechts:hover	{
  background-image: url("https://via.placeholder.com/150/FF0000");
}
<section id="elektro_One">
	<div class="Box-Top"></div>
			<div id="Bild-Rechts"></div>
					<div id="Text-Middle-2">
						<h3>Wer sind wir?</h3>
						<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata.
						</p>
  				</div>
</section>

Upvotes: 0

SwissCodeMen
SwissCodeMen

Reputation: 4875

you must move transition-duration: 2000ms; to

#Bild-Rechts {
    background: url(bilder/Hintergrund-2.jpg) no-repeat;
    width: 605px;
    height:886px;
    float: right;
    transition-duration: 2000ms;
}

and remove it from

#Bild-Rechts:hover {
    background: url(bilder/HintergrundHover.jpg) no-repeat;
}

good luck and try good

Upvotes: 0

ajobi
ajobi

Reputation: 3116

You need to specify which CSS property you want to transition too, not just the transition duration.

.div {
  background: ...;
  transition: background 2000ms;
}

.div:hover {
  background: ...;
}

Here is a list of properties you can transition:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

Upvotes: 0

Related Questions