Tagged: , , , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 7, 2020 at 7:40 pm #1201689
    jannnnnneke

    Hi! I got 7 images who overlaps eachother. It’s like a model with 7 levels. When you hover a level the text should appear. I now got two 1/2 columns. In the first column I got one text block with 7 images with the classes: level1, level2, level3…. till level7. In the second column I got 7 text blocks with the class tekst-level1, tekst-level2 etc. When you hover image level1 you have to see tekst-level1. I now got this:

    .level1, .level2, .level3, .level4, .level5, .level6, .level7 {
opacity: 0.7;
}

.level2, .level3, .level4, .level5, .level6, .level7 {
margin-top: -60px !important;
}

.level1:hover, .level2:hover, .level3:hover, .level4:hover, .level5:hover, .level6:hover, .level7:hover {
opacity: 1;
}

.tekst-level1, .tekst-level2, .tekst-level3, .tekst-level4, .tekst-level5, .tekst-level6, .tekst-level7 {
visibility: hidden !important;
}

.level1:hover .tekst-level1 {
visibility: visible !important;
}

    But nothing happens when you hover the image. I also tried to give the text a class in stead of the text block and then add p to the css code. But still nothing happens. Can you help me?

    And is it possible that when you open the page level 1 is standard visible? Just like the tabs/accordion? Now I’m only working with hover but maybe I should make it clickable in stead of hover and only make the opacity 1 when hovering.

    Hope you understand me!

    THANKS A LOT!

    Janneke

    April 9, 2020 at 10:56 pm #1202518
    Nikko

    Hi Janneke,

    I have checked your site and it seems to work properly as what you have coded.
    Is this already fixed?

    Best regards,
    Nikko

    April 14, 2020 at 12:15 pm #1203537
    jannnnnneke

    Hi Nikko,

    No it’s not fixed. The first images are opacity 1 when hovering, but there is no text when you hover them.

    In the bottom of the page you see the tab element. But that’s not what I want, but that are the texts that should be visible in the images above. That’s why I didn’t remove them.

    So I’m talking about the images 1 to 7 which are standing under eachother NOT next to eachother.

    When you hover an image, the text in the right column should be visible.

    Thanks!

    April 15, 2020 at 9:31 am #1203890
    Nikko

    Hi jannnnnneke,

    I see what you meant now, but what you’re trying to accomplish is not possible with CSS, you’ll need to use javascript or jquery to do it.
    For it to work on CSS tekst-level1 should be inside level1 but since they are on separate blocks CSS is not possible.

    Best regards,
    Nikko

    April 21, 2020 at 1:44 pm #1205780
    jannnnnneke

    I’ve created it with a tab plugin (Everest Tab in my case) Thanks!

    April 22, 2020 at 5:39 am #1206021
    Rikard

    Hi,

    Great, I’m glad that you found a solution and thanks for the update. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

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