Tagged: ,

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • May 10, 2015 at 7:56 pm #442136
    a00109943

    Hey guys!

    I’ve been at this for hours now and I keep having breakthroughs but then something else is messed up afterward.

    Goal: To have another image appear on mouse-over. and revert back to original when not moused over.
    Catch: The whole website is built with the Advanced Layer Slider, the mouseover change needs to happen to a layer inside the slide.

    Steps taking thus far:

    Attempt 1: At first, I created a layer the same dimensions at the background logo/picture and inserted the below code to have the background change color upon hover. This worked well for certain images but is not a viable solution for the whole website since we will be using lots of Text Images where we want the text to be a different color and not the background of the picture of the text.

    .page-id-389 a.ls-l:hover,.page-id-389 a.ls-l:hover img {
    background-color: blue!important;
    }

    Attempt 2: I gave my layer an “attribute ID” and added custom CSS in a code block element on the page where my layer slider was displayed. I hid the code block and everything looked good but we still had the problem with the whole background changing colors on Text Images instead of the text only.

    To this this I used this code:

    img#imdb-icon:hover {
    background: orange!important;
    }

    3. CURRENTLY displayed at: http://alextomaszewski.com/originalcontent/ the “Film Portfolio” menu item is behaving in the perfect way. It is changing to the desired color upon hover. I entered the following HTML code in the “HTML / Video / Audio” section of the Content tab for the layer.

    what-ever-you-like

    The problem now is that this text is responsive on its own and does not shrink or grow with the layer slider. If I change the settings of the layer slider to “non responsive” it fixes this issue but then the whole site’s dimensions are off.

    Is there not a simple way for me to give an attribute ID to the Text Image “Film Portfolio” and then add code in a codeblock on the same page and have the code indicate something about mousing over? We have the code above for changing background color on mouseover, is there not another code for changing picture on mouseover?

    Thanks so much for your help again, I am including my login details below.

    May 12, 2015 at 1:15 pm #442977
    Yigit

    Hi a00109943!

    Can you please point out the image you would like to change?
    In my opinion it would be a lot easier for you to create your content using Advanced Layout Builder instead of LayerSlider as it would limit you so much :)

    Cheers!
    Yigit

    May 12, 2015 at 1:37 pm #442983
    a00109943

    Hi Yigit!

    I am in fact using advanced LAyer slider. it is working beautifully but this is the only thing I need to change. the image I am trying to change or have appear on hover is the menu item called film portfolio. you will see when you browse the page that this item is on the top left, when you hover over the item another image presents itself giving the impression that the menu item or picture is changing color.

    May 12, 2015 at 1:55 pm #442990
    Andy

    Hi!

    I can’t see any film portfolio menu on your website. In fact, I can’t see any menu on your website. Only a page with your name and “New website coming soon” (even when I am logged in as admin). Please help us and show us where exactly to find the menu you are talking about. Screenshots would help (imgur.com, dropbox).

    Cheers!
    Andy

    May 12, 2015 at 2:53 pm #443031
    a00109943

    http://www.alextomaszewski.com/originalcontent

    This page has the menu item I’ve been talking about. Sorry about the confusion. This should help explain exactly what I’m trying to do.

    Thanks again!

    Ben

    May 14, 2015 at 1:54 pm #444270
    Ismael

    Hey!

    I’m sorry but the current layout of the site is not going to work. Layer slider automatically resize the background image of the slide so you won’t be able to accurately target the menu item inside the header. Looks like you’re trying to create the whole page in one blow. Try to separate the header elements from the main content.

    Regards,
    Ismael

    May 14, 2015 at 2:34 pm #444290
    a00109943

    Hi Ismael,

    Forget about the menu item. I simply want to know the code that changes an image to another image upon hover in the advanced layer slider. I know this is possible, I know I need to give the “layer” in this current case the Enfold Logo (see http://alextomaszewski.com/originalcontent/ ) an attribute ID. Then using the code block element I can add a code that says upon hover change to image 2 and if no hover show image 1. I am not sure what the code/styling should be for this, this is what I need help with.

    Once I have this I can finish the website. Thank you again for your patience and help.

    Benjamin

    May 16, 2015 at 5:56 am #445236
    Ismael

    Hey!

    Do you have your own menu code or are you planning to use the theme’s default menu? There are a lot of ways of creating a roll over effect. Search google and you’ll find tons of example. You can use sprites, simple css link hover, background swap, image replacement etc.

    Sprites hover effect: https://css-tricks.com/snippets/css/basic-link-rollover-as-css-sprite/

    If you want to use the background swap, a simple code in a code block or text block element will do:

    <div class="menu-item-1"></div>

    Add this in the Quick CSS field:

    .menu-item-1 {
  width: 250px;
  height: 25px;
  background-image: url(original-image.jpg);
}

.menu-item-1:hover {
  background-image: url(hover-image.jpg);
}

    Regards,
    Ismael

    May 18, 2015 at 3:09 am #445480
    a00109943

    Hi Ismael,

    This is great info, but will this work for the advanced layer slider? What if I have a picture that is a layer, and I want that picture to change on hover. Thats it. The code above looks like it would work for a picture as a separate element on the page.

    Thanks again for the help on this one! I know its probably a super basic question!

    Ben

    May 18, 2015 at 3:33 pm #445740
    a00109943

    I’m not very good with code at all, I understand how enfold works as I’ve been using it for a few years now, but my coding ability is next to zero. I can bold and italicize some stuff but thats about it. :)

    If you’ve already given me the answer, I apologize for not being able to apply it to the advanced layer slider.

    Thanks again! You guys are really great!

    Ben

    May 19, 2015 at 4:11 am #446188
    Ismael

    Hi!

    We created an example for you here, check the hover layer: http://alextomaszewski.com/wp-admin/admin.php?page=layerslider&action=edit&id=24

    This is preview: http://alextomaszewski.com/test-2/

    And the code in the Quick CSS field to create the hover effect: 

    .menu-item-1 {
width: 241px;
height: 106px;
  background-image: url('http://alextomaszewski.com/wp-content/uploads/2015/05/Hyperlink-Film-Portfolio-White.png');
}

.menu-item-1:hover {
  background-image: url('http://alextomaszewski.com/wp-content/uploads/2015/05/Hyperlink-Film-Portfolio-Blue.png');
}

    Of course, you remove the transition and adjust the position of the menu item.

    Best regards,
    Ismael

    May 21, 2015 at 1:39 am #447482
    a00109943

    Hi Ismael,

    Thank you so much for actually going through my site and creating an example. While no words can express my gratitude, it is not exactly what I’m looking for. I will not be using a menu at all. The effect that you created on the “film portfolio” image is perfect, although there is no way for me to put that image exactly where I want it, how can I control where it is positioned.

    In a perfect world:

    1. I want to add an image using the image tab in the content section of the advanced layer slider
    2. I would like that image to have a link which I can add in the Link section of the advanced layer slider
    3. I want to give the image a unique “attribute ID” like “image-123”
    4. I want to add a code block on the page where the advance layer slider is shown and add the code that will:
    Show original image, then show 2nd image upon hover, and back to original when not hovering.

    In a previous post, you replied with this for a similar problem:

    ************************************************************************************************************************************
    Hey!

    OK. On the frontpage, we created a new section with the code block element inside. You can add the icon css modifications inside the code block: http://alextomaszewski.com/wp-admin/post.php?post=389&action=edit

    We modified the hover state of the imdb icon for example, using this code inside the code block element:

    img#imdb-icon:hover {
    background: blue !important;
    }
    You can do the same for the other icons. Add a unique id in the attributes panel then place the css code in the code block.

    Best regards,
    Ismael
    ********************************************************************************************************************

    Instead of the background changing, I want the picture to switch to a different picture upon hover.

    What is the code for that?

    Thanks again Ismael! You’re the best!

    Benjamin

    May 22, 2015 at 7:17 am #448193
    Ismael

    Hey!

    Actually, you change the position of the menu item layer in the Styles panel. Unfortunately, we can’t help you with the following modifications above. Please hire a freelance developer or contact codeable: http://kriesi.at/contact/customization

    Instead of the background changing, I want the picture to switch to a different picture upon hover.

    That is exactly what we did in the example. The difference is that we set the image as background. You can use links tag because it is supposed to be a link, instead of a div tag: http://www.w3schools.com/html/html_links.asp

    Regards,
    Ismael

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.