Changing background color of certain pages
-
Great! I’m glad it worked.
You are too kind. Luckily, you’ve asked questions that I was able to figure out. :)
Have a good day!
-
I had this on another feed but the guy got stumped – so I thought maybe you might know if this is even a possibility.
Is there a way of changing an image from one image to another image entirely when your mouse hovers over the area? Right now we’ve got it where the entire image’s opacity lightens in my front page widget areas here:
http://laurakathrynphotography.com/
– but is there a way to have the image transition into another one entirely?Sorry for all the weirdo questions but you’ll never know if you don’t ask ;)
Thanks for your help!
-
Hello again!
OK. I think there is a way to do this. This one requires more trickery, though. :)Let’s assume the names pic1 and pic2 for this example. Pic1 is the original picture and pic2 is the one you want to display on the rollover. It will work best if pic1 and pic2 have the exact same dimensions.
Step 1:
On the page where you want pic1 to be, insert it like normal.
Right beside pic1, go ahead and insert pic2.
Step 2:
Go to the HTML text editor for that page.
Find the html code for the two pics you just entered and bookend the two images with a div tag with a lass of rollover. Also, in the class of the two images add another word. In pic1 class, add regular. In pic2 class, add rollover.<div class="roll"> <img class="regular" src="http://blah.com/blah/pic1.jpg"><img class="rollover" src="http://blah.com/blah/pic2.jpg"> </div>Note: Just add the words regular and rollover, don’t delete any of the other classes just yet.
Note #2: Obviously don’t put in the blahblah, etc parts. That was just representing the URL of the image source.
Step 3:
In CSS, add the following code:.roll .rollover,.roll:hover .regular{display:none}
.roll:hover .rollover{display:block}In theory, that should do it. However, I’m assuming that you’re wanting to do this on the 3 images on your main page for Children, Family & Graduate collections. It looks like those are part of a widget so I’m not sure if you can manipulate the html for them. If not, you could probably produce the same results by manually creating those images and links on your page.
I would try it out on a regular page (non-widget area) first and see if you can get it to work.
I hope all of the code above shows up! I’m having some issues with the forums tonight stripping out some of what I type in.
Here’s an example I found of someone using the method I mentioned. Example A on there is an example of it. There are fancy transitions/fades you can do also, but I would try with the simple one to see if it works for you first.
Good luck!!!!!!
-
Can you explain a little further what you meant by this:
” If not, you could probably produce the same results by manually creating those images and links on your page. “
(concerning the widgets)
thanks :) -
Hi! Happy (late) Valentine’s Day. :)
I was thinking that you could basically create your own images and DIV tags and insert them in your page. Let me whip up some examples of what I’m talking about this evening and see if they’ll work for you.
I’ll post more in a bit.
-
-
OK.
I think we can tweak the formatting and spacing a bit, but you can get an idea here.Please don’t sue me for copying pictures off of your site. :) I promise I’ll delete them after we get this figured out. When someone clicks on them, they’ll be redirected to your site anyways. :) Please let me know if you want me to take them down and I will immediately.
Anyway, you can get an idea of it could look like. It is rolling over to a different image (I just added a canvas filter in Photoshop). For some reason the formatting gets a little wonky in my Internet Explorer when I look at it, but it looks pretty good in Chrome.
Do you think something like that will work?
-
No you’re fine as long as they’re deleted later :) Thanks for asking :)
And yeah, I mean, that’s great if I can roll over to another image. I don’t really need it to fade fancy or anything, just a simple rollover would be perfect.
My idea is when they hover over those three particular photos, I want the image to roll over to another photo (which I’ll create in PS) listing out certain details about those collections.
Since I want to do this rollover/fade thing inside a widget instead of on a page, how can I do that, considering they’re part of an image widget? Is it possible?thanks again for your help.
-
I’m not sure about doing a customized roll-over on a widget. On the page I linked to earlier, I just made the images and links straight in the WordPress HTML editor.
What widget are you wanting to use it with and I’ll see if I can figure something out. -
The three pictures you are working with are image widgets from my front page sidebar. That is where I wanted to try this rollover effect from one image to another. I don’t know if that will work or not.
-
Correct! I basically did a screen grab of those three pictures and then created a fake sidebar that mimicked what you had on your site. That’s the way I could get the rollovers to work the way I wanted.
Could you let me know the name of the widget(s) you used and what section (Main Sidebar, First Footer Sidebar, First Front Page Sidebar, etc) you put it/them under , please? I’m trying to replicate it on my test site and I’m not having much luck.
-
oH sorry! Ok, here you go – hopefully this helps! Thanks so much for trying this for me:
All three of those pictures in question are in my front page sidebars (So they’re named first, second and third front page sidebar)
They are all just image widgets (Children Collections in first sidebar, Family Collections in second, and Graduate Collections in the third one)
Hope this helps. NO stress if we can’t figure it out. :) THanks for trying though!
-
For image rollovers, you can hijack the existing image areas, hide the existing image on hover, and add in a different background image on hover. Here is an example you can try:
#secondary .widget a { display: block; width: 321px; height: 214px; } #secondary .widget a:hover img { opacity: 0; } #image-5 a:hover { background: url(http://pictureladylaurakathryn.files.wordpress.com/2015/01/laurakathrynphotography_senior_graduate_portrait.jpg?w=321); } #image-6 a:hover { background: url(http://pictureladylaurakathryn.files.wordpress.com/2015/01/laurakathrynphotography_children-portraits-2.jpg?w=321); } #image-7 a:hover { background: url(http://pictureladylaurakathryn.files.wordpress.com/2015/01/laurakathrynphotography_family_photography_children_portraits-12.jpg?w=321); }Change out the image links in the url() values to use different images. For it to work best, the images should be 321 x 241px. Note how I added ?w=321 to the ends of the images in the example to force them to display at 321px width.
If you change out the widgets in the future, or add and remove one of them, you will also need to adjust the CSS to match the new image widget selector to match (i.e. the “#image-7” part targets just the right side widget, that’s its unique ID).
That was a pretty tricky request. :)
You might also like:
http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/
http://en.support.wordpress.com/make-a-screenshot/dannywellman, thanks for helping! I love seeing different people in the CSS forums and working on stuff together. :)
-
-
Woah wait a second….Now that I did that change above, it did something crazy to the other widgets I have in place – take a look here at my sidebar:
http://laurakathrynphotography.com/category/blog/to-my-clients/ -
It must be because of this I believe
#secondary .widget a {
display: block;
width: 321px;
height: 214px;
Any way I can use this JUST for my frontpage sidebars only??? -
I probably should have checked that, sorry. :)
Try adding “.home” in front of all the selectors in my last example to limit the change to the home page only. For example, change this:
#secondary .widget a {to this:
.home #secondary .widget a {and so on.
-
-
Very cool! I tried to do a background swap on hover in CSS the first time I tackled this and couldn’t get it to work. I had a typo in there somewhere.
I’m glad it’s working for you, Laura!
Designsimply, thanks for getting this to work!
-
- The topic ‘Changing background color of certain pages’ is closed to new replies.
WordPress.com Forums 