Changing the main image size using only CSS when hovering over thumbnails

Here is the html code I am working with:

<div class="main-img">
  <img id="main" src="http://i.ebayimg.com/00/s/NjU1WDgwMA==/z/HWIAAOSw8vZXMKGK/$_1.JPG?set_id=880000500F" alt="Teak Cleaner - 1lt bring back the original colour of teak/hardwood - Teak care" class="img-responsive main-image">

  <p class="single-thumbnail-p">
    <img src="http://i.ebayimg.com/00/s/NjU1WDgwMA==/z/HWIAAOSw8vZXMKGK/$_1.JPG?set_id=880000500F" class="img-responsive thumbnail" alt="Teak Cleaner - 1lt bring back the original colour of teak/hardwood - Teak care" />
    <img src="http://i.ebayimg.com/00/s/MTEzMVgxNjAw/z/u8kAAOSw3mpXMKGT/$_1.JPG?set_id=880000500F" class="img-responsive thumbnail" alt="Teak Cleaner - 1lt bring back the original colour of teak/hardwood - Teak care" />
  </p>
</div>

I'm looking for a way to change the background or source of the main image using pure CSS. While I know that the "src" attribute cannot be changed, is there any method to switch the main image when hovering over the thumbnails?

Thank you!

htmlcsspure-css

Answer №1

To successfully achieve the hover effect, both the thumbnails and main image must be siblings or in a parent/child relationship.

After examining your code snippet, it appears that the thumbnail's should come before the main-image. I have arranged them in this order in the markup and used absolute positioning to ensure that CSS hover works correctly. An alternative approach would be using Flexbox with its order property, although it may have limited browser support.

.main-img {
  position: relative;
  padding-bottom: 10px;
}
.main-img .thumbnail {
  position: absolute;
  top: 100%;
  width: 100px;
}
.main-img .main-image {
  display: block;
  height: 200px;
}
.main-img .thumbnail + .thumbnail {
  left: 160px;
}
#main2 {
  display: none;
}
.main-img .thumbnail + .thumbnail:hover ~ #main1 {
  display: none;
}
.main-img .thumbnail + .thumbnail:hover ~ #main2 {
  display: block;
}
<div class="main-img">

  <img src="http://i.ebayimg.com/00/s/NjU1WDgwMA==/z/HWIAAOSw8vZXMKGK/$_1.JPG?set_id=880000500F" class="img-responsive thumbnail" alt="Teak Cleaner - 1lt bring back the original colour of teak/hardwood - Teak care" />
  <img src="http://i.ebayimg.com/00/s/MTEzMVgxNjAw/z/u8kAAOSw3mpXMKGT/$_1.JPG?set_id=880000500F" class="img-responsive thumbnail" alt="Teak Cleaner - 1lt bring back the original colour of teak/hardwood - Teak care" />

  <img id="main1" src="http://i.ebayimg.com/00/s/NjU1WDgwMA==/z/HWIAAOSw8vZXMKGK/$_1.JPG?set_id=880000500F" alt="Teak Cleaner - 1lt bring back the original colour of teak/hardwood - Teak care" class="img-responsive main-image">

  <img id="main2" src="http://i.ebayimg.com/00/s/MTEzMVgxNjAw/z/u8kAAOSw3mpXMKGT/$_1.JPG?set_id=880000500F" alt="Teak Cleaner - 1lt bring back the original colour of teak/hardwood - Teak care" class="img-responsive main-image">

</div>

Answer №2

To create a visually dynamic effect, consider utilizing background images. Incorporate three unique images as your background, then implement a hover effect to change the background image upon interaction.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to position a success alert in the center of the page?

My application displays a success alert using Bootstrap when a user updates or inserts data and the return value is 1. However, this alert appears at the end of the page, and I want it to be positioned in the middle of the page or at the footer of a specif ...

javascriptphpcsstwitter-bootstrapalert

creating center-focused gradients in react native using LinearGradient

Hey there, I'm currently facing an issue with applying a box shadow to one of the buttons in my React Native application. Unfortunately, the box shadow property is not supported in Android. To work around this limitation, I am experimenting with creat ...

cssreactjsreact-nativelinear-gradients

Is it possible to create a blurred effect on an image while preserving the clarity of text within

I have been attempting to create an effect where the image blurs and then reveals text. However, I have encountered issues where the image either blurs completely or behaves strangely. My code is behaving oddly, almost like it's giving a signal. (I&a ...

htmlcssbootstrap-5

Ways to verify if an Ajax request is initiated by a button

While working on disabling all buttons during an ajax request and enabling them once the process is complete and successful, I have encountered a question. How can I determine if the ajax request originates from a specific element, such as a button? Below ...

javascriptjqueryhtmlajax

What is the best way to showcase an array of objects within a page template in Pyramid framework?

I'm seeking guidance on how to display a set of records from a database table in an HTML page using HTML and Pyramid framework. Let's say I have a database table with multiple records, and I want to show all of them on my webpage. While I can re ...

pythonhtmlweb-applicationswebpyramid

Hover over the hidden DIV

I have a div containing an image that is overlapping multiple other divs. It looks something like this: <div style='width:100%;height:100%'><img src='someImage.png'></div> <div id='covered'>I'm un ...

jquerycss

Issue with HTML and CSS Grid alignment coupled with CSS syntax error on RBRACE

I'm in the process of updating my website indexes and decided to incorporate grids. However, when attempting to implement grids using Dreamweaver, I encountered several issues. Firstly, an error message appeared stating "Expected RBRACE at line 72, co ...

htmlcss

Two-column Bootstrap 4 collapsible navigation bar

How can I display my collapsed navbar in 2 columns using Bootstrap 4? Here is what the fullsize navbar looks like: http://prntscr.com/kymuzq And here is the collapsed navbar: http://prntscr.com/kymtun Does anyone know an easy way to make the collapsed ...

htmlcsstwitter-bootstrapbootstrap-4

I'm puzzled as to why the background isn't fully covering all of the content on the page

As an IT student, I have been diligently working on creating a website for my assignment. However, I am facing an issue with the background not adjusting properly based on the content placed within it. While one page includes all the sub-divs as intended, ...

htmlcssformatting

Changing the appearance of a shadow root element using CSS styling

My CustomField has a FormLayout inside, and I want to change the #layout element within the shadow-root. While it can be done with JavaScript: document.querySelector("#myid > vaadin-form-layout") .shadowRoot .querySelector("#layout" ...

cssvaadinvaadin-flow

Activating the submit button only following confirmation that the image dimensions have been verified

I've written some code that checks whether selected pictures meet specific size and dimension constraints before enabling the submit button. However, there's an issue where the button might be enabled before verifying the last image due to delays ...

jqueryhtmlfile-upload

Conceal flex items when there is inadequate space available

I need help with customizing my JIRA timeline chart to show information about epics in progress. When an epic spans multiple releases, there is enough space on the timeline bar to display all relevant details. However, if an epic only spans one release, th ...

javascriptcssreactjsflexbox

Ways to dynamically adjust the size of a group of images in a limited space without any overflow, scrolling, or the use of media queries?

In my React app, I am receiving a variable number of square images from an API to display. These images come in dimensions of 200px, 512px, or 600px squares and have corresponding jackpot denominations and amounts underneath them with a title above. The di ...

cssreactjsflexboxcss-grid

Ensure that each child li in the responsive dropdown menu has a width equal to the longest

Hello! I am currently working on a responsive dropdown menu and have a question regarding the width of the child li elements. Is it possible to make all the child li elements have the same width as the longest child li element? If so, what do I need to cha ...

htmlcssdrop-down-menuresponsive-design

I have managed to update the Immutable and Primitive Data-Types in JS. Now, the question arises - are these truly Primitives or are the concepts in

In JavaScript, there are 4 primitive data types that store values directly: String, Number, Boolean, and Symbol. I am excluding undefined and null from this list as they are special data types with unique characteristics. One key feature of primitives is ...

javascripthtml

Custom AngularJS directive for ensuring the selection of a required HTML element

Today brings another question as I continue working on my web application. I've encountered an issue with the 'required' attribute not being widely supported in major browsers. The attribute only works if the first option value is empty, whi ...

javascriptjqueryhtmlangularjs

When combining CSS grids, nesting them can sometimes cause issues with the height layout

Check out the code on jsFiddle .component-container { width: 800px; height: 200px; background-color: lightyellow; border: 1px solid red; padding: 10px; overflow: hidden; } .component-container .grid-container-1 { display: grid; grid-tem ...

javascripthtmlcsscss-grid

Providing an Object as the Output of an Event Handler, in cases where the data cannot be transformed into another format

My goal is to have the second dropdown menu, labeled Item, dynamically update when a category is selected from the first dropdown menu, labeled Type. If I could access the array I created within the change event, I could easily populate the second dropdow ...

javascriptjqueryhtml

Leveraging JavaScript along with the jQuery library and API to showcase information related to

Hey there! I have been working on this API that shows upcoming concerts, but I'm struggling to display the images associated with each concert. I've tried using for loops to iterate through the objects, and it seems like every sixth element has ...

javascriptjqueryhtmlajaxobject

The concept of nested lists and the importance of z-indexing

I am in the process of creating a navigation menu for a website that includes submenus. However, I am encountering an issue with the submenu sliding down and not lying behind the main navigation as intended. I have attempted to use z-index to address this ...

htmlcss