Hover Show Div and Hide Placeholder

Question

I'm trying to build a circle that shows information on hover and I'm having a bit of trouble with the placeholder disappearing. This is where I'm currently building: http://ecommercepro.canny-creative.com

The section I'm on about is the right column below the fold with circles and little shop icons.

I've got the hover effects showing a in purely HTML and CSS. This is my HTML:

<div id="big-circle" class="circle big">

    <div class="circle c-one small"><i class="icon-store2"><!-- icon --></i></div>

        <div id="circle-one-text">
            Circle One Text
            <br><br>    
            Aberant subdita homo vis aethere. Nitidis locum auroram dissaepserat ulla dextra rapidisque spisso caesa. Nam coegit alto unda austro liberioris effigiem? Nubes quisquis iners. Quicquam fratrum declivia gravitate auroram dissaepserat ulla dextra rapidisque.
    </div>

    <div class="circle c-two small"><i class="icon-store2"><!-- icon --></i></div>
        <div id="circle-two-text">
            Circle Two Text
            <br><br>    
            Aberant subdita homo vis aethere. Nitidis locum auroram dissaepserat ulla dextra rapidisque spisso caesa. Nam coegit alto unda austro liberioris effigiem? Nubes quisquis iners. Quicquam fratrum declivia gravitate auroram dissaepserat ulla dextra rapidisque.
    </div> 

     <div class="circle c-three small"><i class="icon-store2"><!-- icon --></i></div>
        <div id="circle-three-text">
            Circle Three Text
            <br><br>    
            Aberant subdita homo vis aethere. Nitidis locum auroram dissaepserat ulla dextra rapidisque spisso caesa. Nam coegit alto unda austro liberioris effigiem? Nubes quisquis iners. Quicquam fratrum declivia gravitate auroram dissaepserat ulla dextra rapidisque.
    </div> 

    <div class="circle c-four small"><i class="icon-store2"><!-- icon --></i></div>
        <div id="circle-four-text">
            Circle Four Text
            <br><br>    
            Aberant subdita homo vis aethere. Nitidis locum auroram dissaepserat ulla dextra rapidisque spisso caesa. Nam coegit alto unda austro liberioris effigiem? Nubes quisquis iners. Quicquam fratrum declivia gravitate auroram dissaepserat ulla dextra rapidisque.
    </div> 


    <div id="circle-placeholder-text">
        Aberant subdita homo vis aethere. Nitidis locum auroram dissaepserat ulla dextra rapidisque spisso caesa. Nam coegit alto unda austro liberioris effigiem? Nubes quisquis iners. Quicquam fratrum declivia gravitate auroram dissaepserat ulla dextra rapidisque.
    </div>

</div>

And this is the CSS:

#big-circle {
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}

.circle {
    border-radius: 50%;
    width: 80px;
    height: 80px;
    background-color: #f5f5f5;
    border: 2px solid lightgrey;
    display: inline-block;
    position: absolute;
    transition:all 0.3s ease;
    text-align: center;
}

.circle.big {
    height: 450px;
    width: 450px;
    border: 2px dashed lightgrey;
    background: #f5f5f5;
    margin: 0px;
}


.circle.small:hover {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}

.circle i {
  font-size: 30px;
  line-height: 75px;
  margin: 0px;
}

.c-one {
  left: 20px;
  top: 20px;
}


.c-two {
    right: 20px;
    top: 20px;
}


.c-three {
    left: 20px;
    bottom: 20px;
}


.c-four {
    right: 20px;
    bottom: 20px;
}

#circle-placeholder-text {
    left: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    position: absolute;
    right: 0;   
    top: 120px;
    width: 75%;
    display: block;
}


#circle-one-text, #circle-two-text, #circle-three-text, #circle-four-text {
    display: none;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    position: absolute;
    right: 0;   
    top: 120px;
    width: 75%;
}


div.c-one:hover + div#circle-one-text, div.c-two:hover + div#circle-two-text, div.c-three:hover + div#circle-three-text, div.c-four:hover + div#circle-four-text {
    display: block;
}

What I want to happen is the placeholder text to disappear when the other text appears?

Also, I'd like to add a nice little fade in/out. Any suggestions would be greatly appreciated!

Is this probably better in jQ/JS?

score 0 · Answer 1 · edited May 23 '17 at 11:43

Updated:

Since the small circles and the placeholder are siblings I can't think of a css way of doing it. There are workarounds of course:

You can give the text for circles the same background as the container and give it a z-index to cover the placeholder text:

#circle-one-text, #circle-two-text, #circle-three-text, #circle-four-text {
    ...
    background-color: #f5f5f5;
    z-index: 40;
}

Alternatively you can move the circle-placeholder-text inside the .small divs (you'l need 4 instead of 1 then) and make them to position at the same place and use something like:

.small #circle-placeholder-text {
    visibility: visible;
}

.small:hover #circle-placeholder-text {
    visibility: hidden;
}

Again if it can be done using jQuery it'd be as simple as:

$('.small').hover(function() {
    $('#circle-placeholder-text').fadeToggle('slow');
)

......

For the fadein/out part you can use transition. Take a look at this.

If you can use jQuery though, you can achieve it easily by using its built-in functions such as fadeToggle(). sample jsfiddle

Class `.circle` has a main wrapper and when you hover it hides placeholder! — Ihor Tkachuk, Apr 17 '15 at 17:28
Right, my bad, the small circles and their container had the same class of `.circle` and I got things a little mixed up. Since the `.small` circles are siblings with the text placeholder, as far as I know it can't be done directly using CSS. See whether the updated answer works for you. — Samurai, Apr 17 '15 at 18:42

enigma · Answer 2 · 2015-04-17T20:00:15.550

This is perfectly possible, even though the circles and placeholder are siblings. You just require similar code in addition to what you already have in place on the page to show the individual text paragraphs when hovering over the circles.

div.c-one:hover ~ div#circle-placeholder-text,
div.c-two:hover ~ div#circle-placeholder-text,
div.c-three:hover ~ div#circle-placeholder-text,
div.c-four:hover ~ div#circle-placeholder-text {
    display: none;
}

As Samuri has noted, the transition can be generated by using opacity to show / hide elements rather than display:

transition: opacity 0.2s linear;
opacity: 0;

In general, this kind of thing is arguably easier to think about and do using JavaScript / jQuery, but it could be considered cleaner code to do it wholly in CSS.

Hover Show Div and Hide Placeholder

2 Answers2