CSS hover effect

I’m trying to make a hover effect using CSS. The idea here is when user hovers over title, the text box appears, but it’s visible only on title hover.

I’ve made 2 text boxes, one is the title (css class is called gastro_title), and the second one is text that’s only visible on title hover (css class is called gastro_title_hover). I’ve tried this code, but it’s not working for me. Any ideas ?

.gastro_title {position:relative;}

.gastro_text_onhover {

visibility: hidden;

width: 300px;

color: #fff;

text-align: center;

border-radius: 6px;

padding: 5px 0;

position: absolute;

z-index: 1;

}

.gastro_title .gastro_text_onhover::after {

content: “”;

position: absolute;

bottom: 100%;

left: 50%;

margin-left: -5px;

border-width: 5px;

border-style: solid;

border-color: transparent transparent black transparent;

}

.gastro_title:hover .gastro_text_onhover {

visibility: visible!important;

}

Read more here:: CSS hover effect

Leave a Reply

Your email address will not be published. Required fields are marked *