Switch out one picture for another by hovering over it

Question

Switch out one picture for another by hovering over it

Looking for a way to replace the holder-01-small.png image with one of the same dimensions on hover without altering the HTML code. Here is the code snippet:

<div class="mix category-1">

<a href="img/holder-01-large.png" class="photo">

<img src="img/holder-01-small.png alt="Ram - Srbija" class="img-small-1"></a>

<a href="img/slider-photo-1.jpg" target="_blank" class="techdraw">Primer montaze</a>

<a class="popup-youtube" href="https://www.youtube.com/watch?v=dz1kDQEHJaU">Video primer</a>

</div>

Is there a way to achieve this effect using only CSS?

html css hover pseudo-class

Answer 1

Answer №1

Achieving this is feasible, although not through the method you've proposed. Instead, consider creating a div element (using an img tag would require a transparent image as a placeholder, while a div will suffice).

<div class="image"></div>

In your CSS, you can experiment with the following code. Remember to specify both height and width for the div to prevent it from collapsing in on itself due to being empty.

.image {
    background-image: url("path-to-file");
    height: xx;
    width: yy;
}

.image:hover {
    background-image: url("path-to-different-file");
}

With this setup, the div will change its background image on hover.

Answer 2

Achieving this is feasible, although not through the method you've proposed. Instead, consider creating a div element (using an img tag would require a transparent image as a placeholder, while a div will suffice).

<div class="image"></div>

In your CSS, you can experiment with the following code. Remember to specify both height and width for the div to prevent it from collapsing in on itself due to being empty.

.image {
    background-image: url("path-to-file");
    height: xx;
    width: yy;
}

.image:hover {
    background-image: url("path-to-different-file");
}

With this setup, the div will change its background image on hover.

Answer 3

Answer №2

Yes, it is possible to achieve this effect using the provided HTML. Just make sure to add the missing quote after the src attribute!

a.photo:hover img {
  display: none
}
a.photo:hover::after {
  content: url(http://lorempixel.com/100/100);
}

<div class="mix category-1">

  <a href="img/holder-01-large.png" class="photo">

    <img src="http://lorempixel.com/g/100/100" alt="Ram - Srbija" class="img-small-1" />

  </a>

  <a href="img/slider-photo-1.jpg" target="_blank" class="techdraw">Example installation</a>

  <a class="popup-youtube" href="https://www.youtube.com/watch?v=dz1kDQEHJaU">Video example</a>

</div>

Please note that I have substituted the image source to demonstrate the effect in this snippet; I hope that is acceptable to you!

Answer 4

Yes, it is possible to achieve this effect using the provided HTML. Just make sure to add the missing quote after the src attribute!

a.photo:hover img {
  display: none
}
a.photo:hover::after {
  content: url(http://lorempixel.com/100/100);
}

<div class="mix category-1">

  <a href="img/holder-01-large.png" class="photo">

    <img src="http://lorempixel.com/g/100/100" alt="Ram - Srbija" class="img-small-1" />

  </a>

  <a href="img/slider-photo-1.jpg" target="_blank" class="techdraw">Example installation</a>

  <a class="popup-youtube" href="https://www.youtube.com/watch?v=dz1kDQEHJaU">Video example</a>

</div>

Please note that I have substituted the image source to demonstrate the effect in this snippet; I hope that is acceptable to you!

Answer 5

Answer №3

If you want to use a div instead of an img tag, you can utilize the background-img property in CSS along with a hover effect. Here is an example:

.img-small-1{
  background-img: url('..img/holder-01-small.png');
  width: 'your image's width';
  height: 'your image's height';
}

.img-small-1:hover {
  background-img: url('..img/myOtherImage.png');
}

Answer 6

If you want to use a div instead of an img tag, you can utilize the background-img property in CSS along with a hover effect. Here is an example:

.img-small-1{
  background-img: url('..img/holder-01-small.png');
  width: 'your image's width';
  height: 'your image's height';
}

.img-small-1:hover {
  background-img: url('..img/myOtherImage.png');
}

Switch out one picture for another by hovering over it

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to ensure that the width of a div fills its parent container?

Tips for successfully implementing overflow-x in a timeline layout without causing any format disruptions

My React application is not showing the CSS styles as intended

individual elements displayed sequentially within the same block with variable naming

jquery conflict between parent div hover function and child's hover function

Creating a responsive HTML, CSS, and JavaScript popup: A step-by-step guide

Is there a way to make the primary button on the previous page function correctly again, just like it did before it was clicked?

Generating a unique JavaScript array by extracting data from an HTML input element

Bone structure template - optimizing list spacing with CSS

"Enhance your ASP.NET site with a captivating background

The initial click event for the input element in Jquery is not functioning correctly

Managing post and session data during PHP form submission

Is it possible to adjust the ul width to match its parent's width using CSS?

Assigning a specific data type value to an element as it enters the top of the viewport

Enhance your theme property in Styled Components by incorporating numerous style properties

incorporating numerous interconnected javascript files within a single html document

Transforming an HTML5 game into a native mobile application

Centering an unordered list and ensuring the image is responsive across different screen sizes are both top priorities for this design

Expanding the size of your Bootstrap 3 input box

Select only eBook files using this HTML form: {file-type}