CSS question - DIV content change on hover
- Started
- Last post
- 13 Responses
- fadein11
Any pointers on how to achieve this please:
I have 6 blocks (3 blocks on each row).
I need each block to have a background image and title in it but when on hover I need the background to change and the title to change to a short paragraph.
I have done similar before but not changing the background and the content of the block at the same time on hover.
I don't want to use jQuery or anything like that - pure CSS if possible.
Any pointers or advice would be much appreciated.
Thanks.
- Continuity0
It _should_ be as simple as this:
div {
background: url(path/to/image.png) 0 0 no-repeat;
}div:hover {
background: url(path/to/hoverImage.png) 0 0 no-repeat;
}This isn't including any sort of transition animation, and it will be dependent on declaring a ID name for each block.
- Ditto the content of the DIV that contains your text.Continuity
- this is just image-swapping of the background... what about the paragraph / title?PonyBoy
- fadein110
thanks but that doesn't really answer it.
issue is not just an image changing on hover...
I need content to change in the div i.e. Title changes to paragraph on hover.
- i_was-3
Read the Coran and you'll find the answer.
- dmay0
To change the content, you can switch the display of the title and the paragraph:
<div>
<p class="title">This is the Title</p>
<p class="paragraph">This is the Paragraph</p>
</div>div .title {
display: block;
}
div .paragraph {
display: none;
}
div:hover .title {
display: none;
}
div:hover .paragraph {
display: block;
}
- PonyBoy0
or use what dmay just showed you... but use opacity so you can transition it
- section_0140
Javascript is your answer.
Use a document.querySelector() to grab a reference to each div you want to hide.
On hover hide one and show the other. As far as the title you can do the same thing. except you'll be replacing the "innerHTML" of that element.
I realize this is an abstract reply, but it's the best way to do it.
- no need though when it can all be done in CSS which I know it can. But thanks.fadein11
- The "need" is more a matter of opinion. Personally, I prefer to do dynamic DOM manipulation through javascript. Especially when projects get larger.section_014
- But, whateva floats your boat!section_014
- yep I know what you are saying - just no need to get into that detail as I knew it could be done with CSS alone. But thanks again.fadein11
- dmay0
if you use opacity to transition, and want to replace the content so it shows in the same place (overlap), both <p> should be positioned to absolute.
The elements with opacity:0 still take space in the layout.
- PonyBoy3
I'm working on seomthing for a bunch of little modules that will eventually be about 500px x 500px boxes on screen (they'll eventually be responsive)...
... I'm using GSAP though (I see section_014 said that's the way to go and I kind of agree with him)... If you'd like I'll forward you the simple HTML for this... it has a few divs styled w/css... the graphics / type all transition using GSAP (just like you used to use in Flash):
- (section_014 said JS... not GSAP... but everything I've setup is all JS... just calling GSAP fucntions to make it happen)PonyBoy
- haha... DVs when I offer to share scripts... dicks <3
:)PonyBoy - That was me, actually, and I'd done it by accident. :\ I saw my mistake, and immediate upvoted!Continuity
- ha! :)PonyBoy
- Yeah, sorry about that. :\Continuity
- thank you so much but I think he has nailed it below.fadein11
- :)PonyBoy
- dmay4
here's a fiddle in css:
- mekk3
Here you go buddy