I am wondering if it is possible to swap out an image when hovering over an icon link by only using CSS and HTML

Question

I am wondering if it is possible to swap out an image when hovering over an icon link by only using CSS and HTML

I am working on a layout where an image is displayed in a col-8 next to 4 icons and a paragraph in a col-4. I want to keep the formatting consistent on this page. Specifically, I would like the image linked to the first icon to automatically display when the page loads. Then, when the user hovers over the other three icons, I want the corresponding images to replace the initial one.

If anyone has a solution or can point me towards a helpful resource, such as a video or article, I would greatly appreciate it. Unfortunately, I had to remove some code related to the svg icons for ease of reading and file size constraints, but you should get the gist of it. https://i.sstatic.net/u13pz.jpg

HTML

<div class="container-right">
            <div class="row pb-5 pt-3">
                <div class="col-4 ">
                    <h1 class="pb-2 text-center text-md-left">Products</h1>
                    <b>Customer satisfaction is a top priority. At Hills Industrial, we want our customers to be astounded with the choices we offer, excited by the innovation we provide and satisfied with our service and reliability. Providing superior customer experience in a consistent manner is our primary goal.</b>
                    <div class="row mt-4">
                        <!-- Controls -->
                        <div class="col-5">
                            <a href="#"><div class="icon-background"><svg class="product-icon" </svg></div></a>
                        </div>
                        
                        (Icons continuation omitted for brevity)
                    
                    </div>
                </div>
                <div class="col-8">
                    <img src="img/motor-stock.jpg" class="product-photo"></img>
                </div>
            </div>
        </div>

CSS

.product-icon{
  width:50px;
  fill: #ffff;
  transition:fill 0.3s ease-out;
}

 .icon-background:hover .product-icon{
  fill: #fb0203;
}

.product-photo{
  border-radius:400px 0px 0px 400px ;
  max-width: 1000px;
  height: 100%;
}

.container-right {
  padding-left: 15px;
  /* padding-right: 15px; */
}
(Media queries and CSS classes continue for responsiveness and styling)

html css image bootstrap-4

Answer 1

Answer №1

To avoid diving too deeply into your code, one suggestion is to forego using an img tag and instead set the image as a background-image on the div; additionally, arrange the links on the same level as the image div so that you can utilize the sibling combinator for image changes.

One approach involves leveraging CSS grid (with images sourced from ):

.container {
  display: grid;
  grid-template-areas:
    "content content image image"
    "link1 link2 image image"
    "link3 link4 image image";
}

.content {
  grid-area: content;
}

.link {
  display: inline-grid;
  place-content: center;
  height: 50px;
  width: 50px;
  background-color: lightblue;
  border-radius: 100%;
  cursor: pointer;
}

.link:hover {
  background-color: blue;
  color: white;
}

#link-1 {
  grid-area: link1;
}

#link-2 {
  grid-area: link2;
}

#link-3 {
  grid-area: link3;
}

#link-4 {
  grid-area: link4;
}

.image {
  grid-area: image;
  background-image: url("https://kaboompics.com/cache/8/4/3/a/0/843a085ea22499ba621d5808a4f33fba35045a6d.jpeg");
  background-size: cover;
  height: 500px;
  width: 700px;
}

#link-1:hover ~ .image {
  background-image: url("https://kaboompics.com/cache/d/1/9/b/2/d19b234473ad74fce320c208f5e0f8ddfc20d1f3.jpeg");
}

#link-2:hover ~ .image {
  background-image: url("https://kaboompics.com/cache/b/d/b/1/b/bdb1b249aacef7ebcb74a4ffd66f211f9abd98c0.jpeg");
}

#link-3:hover ~ .image {
  background-image: url("https://kaboompics.com/cache/4/3/a/a/c/43aac8eb9d62e85b1f99e916384d08f498bb4810.jpeg");
}

#link-4:hover ~ .image {
  background-image: url("https://kaboompics.com/cache/5/c/6/d/f/5c6dfadb3207b778e2d8478b2502781f7220592f.jpeg");
}

<div class="container">
  <div class="content">
    <h1 class="pb-2 text-center text-md-left">Products</h1>
    <p>Customer satisfaction is a top priority. At Hills Industrial, we want our customers to be astounded with the choices we offer, excited by the innovation we provide and satisfied with our service and reliability. Providing superior customer experience in a consistent manner is our primary goal.</p>
  </div>
  
  <div class="link" id="link-1">Link 1</div>
  <div class="link" id="link-2">Link 2</div>
    <div class="link" id="link-3">Link 3</div>
    <div class="link" id="link-4">Link 4</div>
  
  <div class="image"></div>
</div>

Best of luck!

Edit: According to this MDN article, reserve the use of CSS images for cases where the image lacks semantic meaning (strictly decorative); if your images carry content significance, consider using img tags and managing their visibility via JavaScript.

Answer 2

To avoid diving too deeply into your code, one suggestion is to forego using an img tag and instead set the image as a background-image on the div; additionally, arrange the links on the same level as the image div so that you can utilize the sibling combinator for image changes.

One approach involves leveraging CSS grid (with images sourced from ):

.container {
  display: grid;
  grid-template-areas:
    "content content image image"
    "link1 link2 image image"
    "link3 link4 image image";
}

.content {
  grid-area: content;
}

.link {
  display: inline-grid;
  place-content: center;
  height: 50px;
  width: 50px;
  background-color: lightblue;
  border-radius: 100%;
  cursor: pointer;
}

.link:hover {
  background-color: blue;
  color: white;
}

#link-1 {
  grid-area: link1;
}

#link-2 {
  grid-area: link2;
}

#link-3 {
  grid-area: link3;
}

#link-4 {
  grid-area: link4;
}

.image {
  grid-area: image;
  background-image: url("https://kaboompics.com/cache/8/4/3/a/0/843a085ea22499ba621d5808a4f33fba35045a6d.jpeg");
  background-size: cover;
  height: 500px;
  width: 700px;
}

#link-1:hover ~ .image {
  background-image: url("https://kaboompics.com/cache/d/1/9/b/2/d19b234473ad74fce320c208f5e0f8ddfc20d1f3.jpeg");
}

#link-2:hover ~ .image {
  background-image: url("https://kaboompics.com/cache/b/d/b/1/b/bdb1b249aacef7ebcb74a4ffd66f211f9abd98c0.jpeg");
}

#link-3:hover ~ .image {
  background-image: url("https://kaboompics.com/cache/4/3/a/a/c/43aac8eb9d62e85b1f99e916384d08f498bb4810.jpeg");
}

#link-4:hover ~ .image {
  background-image: url("https://kaboompics.com/cache/5/c/6/d/f/5c6dfadb3207b778e2d8478b2502781f7220592f.jpeg");
}

<div class="container">
  <div class="content">
    <h1 class="pb-2 text-center text-md-left">Products</h1>
    <p>Customer satisfaction is a top priority. At Hills Industrial, we want our customers to be astounded with the choices we offer, excited by the innovation we provide and satisfied with our service and reliability. Providing superior customer experience in a consistent manner is our primary goal.</p>
  </div>
  
  <div class="link" id="link-1">Link 1</div>
  <div class="link" id="link-2">Link 2</div>
    <div class="link" id="link-3">Link 3</div>
    <div class="link" id="link-4">Link 4</div>
  
  <div class="image"></div>
</div>

Best of luck!

Edit: According to this MDN article, reserve the use of CSS images for cases where the image lacks semantic meaning (strictly decorative); if your images carry content significance, consider using img tags and managing their visibility via JavaScript.

I am wondering if it is possible to swap out an image when hovering over an icon link by only using CSS and HTML

Answer №1

Similar questions

Tips for positioning and styling submenu on dropdown using CSS

The combination of Javascript and CSS allows for interactive and visually

Set maximum size for background image in div

Processing .dat files using JavaScript

Add a CSS class to a different element when hovering

Modify the color of every element by applying a CSS class

Animate images using mouse vertical movement

XPaths are used to verify the accuracy and relevance of text content

Invisible Angular Material Date Picker Issue

What is the best way to assign a value to the param tag of an applet using JavaScript variables

Is Socket.io combined with Redis the best architecture for an interactive gaming experience?

Creating a new webpage that automatically populates with multiple images from a server using PHP

Is it possible to use a JavaScript string as a selector in jQuery?

Error encountered in jQuery's addClass and removeClass functions: Unable to read the property 'length' of an undefined value

When a table cell is hovered over, a left border will be added

Invoking a Directive within another Directive

Finding JPG images using Jquery selector

Seeking assistance in developing a dynamic footer complete with a gallery of images

Creating a CSS animation to repeat at regular intervals of time

The functionality of displaying one div while hiding another upon click seems to be malfunctioning