Support » Themes and Templates » Rollover Image in header

  • Website:
    Theme: Blissful Blog

    Hi there. I have been trying to add an image to my header that when your mouse hovers over it, the image moves up but the rest of the header doesn’t move. For example, when i hover over a circle on the left side of the header it moves up, but the words on the right side of the header is stationary. I am not very good with CSS. Could anyone possibly walk me through doing this? Thanks so much in advance!

Viewing 8 replies - 1 through 8 (of 8 total)
  • esmi


    Forum Moderator

    I’m sorry but it is beyond the scope of these forums to teach basic markup and CSS. Try asking on a general CSS forum.

    Really? 🙁 That’s odd. i have searched this forum up and down and i have seen so many similar posts but not one as specific i guess. I understand the basic markup, what i meant was i wasn’t sure if you need to use JQuery or if i could use CSS. Thanks anyways. Sorry for wasting your time.



    Forum Moderator

    It depends upon the theme.

    I am using Blissful Blog Theme. I have noticed that there is some JQuery code in my header.php such as

    <script type="text/javascript">
    	var $j = jQuery.noConflict();
    	$j(document).ready(function() {
    		$j(" li:first").addClass("first");

    Bust wasn’t exactly sure how or where to add a code to make the rollover happen. Would i need to add something like .rollover to my this

    <div id="header">
            <p id="title"><a>/"><img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="Header Image" /></a></p>

    I’m just not quite sure how to do it. Thanks.

    [Please post code or markup snippets between backticks or use the code button.]



    Forum Moderator

    That jQuery has nothing to do with your header image.

    Oh, i am sorry. Well then i am not sure what else i should ask. I will try somewhere else. Sorry, again.

    I have tried to create a header that when you hover over it the image is changed to something else. I put the following code into my style.css , but nothing happens. Could i please get some other suggestions. Thanks in advance!

    [CSS moderated as per the Forum Rules. Please just post a link to your site.]

    sorry, here is the code

    I hope i did that right 🙂

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Rollover Image in header’ is closed to new replies.