Rollover Image in header

  • BusyBrandi

    (@busybrandi)


    13 years ago

    Website: https://busybrandi.com
    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

    (@esmi)

    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.

    Thread Starter BusyBrandi

    (@busybrandi)

    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.

    esmi

    (@esmi)

    It depends upon the theme.

    Thread Starter BusyBrandi

    (@busybrandi)

    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("ul.menu 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>
    </div>

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

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

    esmi

    (@esmi)

    That jQuery has nothing to do with your header image.

    Thread Starter BusyBrandi

    (@busybrandi)

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

    Thread Starter BusyBrandi

    (@busybrandi)

    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.]

    Thread Starter BusyBrandi

    (@busybrandi)

    sorry, here is the code

    https://pastebin.com/XHPtnpDp

    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.