Sunday, April 3, 2016

[WD&D] Digest for sitedesign@googlegroups.com - 3 updates in 1 topic

Artist <SitePro@gmail.com>: Apr 02 04:17PM -0700

I am playing with responsive image rollovers and there are so many
different ways to do it that it is getting irritating trying to find one
that works, simply.
 
Why doesn't this work?:
 
/* CSS CODE */
 
.headerGFX {
width: 100%;
height: auto;
background-color:#71bc6d;
margin: auto;
padding: none;
}
.headLogo {
width: 100%;
background-image:
url(http://violinteachersiouxfalls.com/images/logo-a_marias_violin_and_vi.png);
display: block;
background-size: contain
}
.headLogo hover{
background-image:
url(http://violinteachersiouxfalls.com/images/logo-b_marias_violin_and_vi.png);
}
 
 
<!-- HTML CODE: -->
 
<div class="headerGFX">
<a class="headLogo" href="/" title="Maria's Violin &amp; Viola Lessons
Home Page"></a>
</div>
 
I have seen this done many times, what am I tripping up over? I mean, My
background color isn't even showing up.
 
The images are 1920 pixels x 200 pixels, both, meant to have a little extra
cushion underneath (just trying to get it going and see what it looks like
to get started), supposed to be page wide (within the restrictions of the
wrapper for padding, but conform to smartphone, tablet and computer
screens).
 
Can I not use an image background on an anchor anymore if I am using
responsive design methodology? Maybe I should try a div inside the anchor?
 
Thanks! -Doug
Artist <SitePro@gmail.com>: Apr 02 05:15PM -0700

OK, I'm almost there, but I'm not getting rid of the src image...
 
/* CSS CODE */
 
.headerContainer {
width: 100%;
height: auto;
padding-top: 40px;
background-color: #71bc6d;
}
.headerGFX {
margin: auto;
display: hidden;
}
.headLogo {
width: 100%;
display: block;
}
.headerGFX:hover {
background-image:
url(http://violinteachersiouxfalls.com/images/logo-b_marias_violin_and_vi.png);
background-size: contain;
display: block;
}
.headLogo:hover {
display: hidden;
}
 
 
<!-- Rollover HTML -->
 
<div class="headerContainer">
<div class="headerGFX">
<a class="headLogo" href="/" title="Maria's Violin &amp; Viola Lessons
Home Page"><img class="headLogo"
src="http://violinteachersiouxfalls.com/images/logo-a_marias_violin_and_vi.png"
alt="Maria's Violin &amp; Viola Lessons Header Logo"></a>
</div>
</div>
 
When I hover over the image, I see the underlying background appear, but
the original message never goes away. Hmmmm...
 
If anyone has any ideas on what I'm doing that's so off, please inform me
of where I am tripping over my own code. Thanks! -DP
Artist <SitePro@gmail.com>: Apr 02 08:43PM -0700

Argh...
 
Stupid me...
 
opacity: 0;
 
Not
 
display: hidden;
 
I think it will work, now. ;)
 
Sorry I bothered y'all!
 
Keep Codin'! -Doug
You received this digest because you're subscribed to updates for this group. You can change your settings on the group membership page.
To unsubscribe from this group and stop receiving emails from it send an email to sitedesign+unsubscribe@googlegroups.com.
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)