changing multiple items on hover

Hi there,

can you share a link to your site where i can see this layout?

of course

Do you have this layout setup on a GP site ? Need to see how you have created the containers etc.

hi david,
yes of course.

You will need to do something like this:

.gb-container.your-container-class:hover {
    background-image: url(URL TO YOUR HOVER BACKGROUND);
}

.gb-container.your-container-class:hover .gb-headline.your-headline-class {
    background: red;
    color: white;
}

Let me know if you need more info :)

hi tom, one thing is missing, the text has to change too. not only the background color.
any idea?

Hi,

To clarify: You're trying to change different elements and their stylings when you hover the container?

If so, you'll need a script to add event listeners to the container if you want it to be the hover trigger point to change all of its contents.

Example:

function add_hover_listeners(){
var switchingElem = document.querySelectorAll(".hover-container");
for( i=0; i<switchingElem.length; i++ ){
switchingElem[i].addEventListener("mouseover",function(){
//do your style changes here. 
// example: this.querySelector(".headline-text").style.display = "none";
// this.querySelector(".headline-text-onhover").style.display = "block";
});
switchingElem[i].addEventListener("mouseout",function(){
//do your style changes here. 
// example: this.querySelector(".headline-text").style.display = "block";
// this.querySelector(".headline-text-onhover").style.display = "none";
});
}
}
window.addEventListener("DOMContentLoaded",function(){
add_hover_listeners();
});

And this is just a simple example of displaying/hiding a specific element. You can add in more as long as you know the right CSS selectors.