CODEWITHSUNDEEP
javascriptcssbuttonhover
user2706970
user2706970

Reputation: 29

How to trigger a css animated button by hovering over an image on the same page

I'm having difficulties with my website. On the homepage I have an image. On top of the image is a css animated button which on rollover of the button it animates.

What I need to do is on rollover of the image and also the button, it triggers the animation. At the moment only on Rollover of the actual button does it animate.

The animation is purely css, but I'm assuming I'll have to use Javascript to trigger this, but I'm not sure how to write it.

below is my html:

<span class="overlay"></span> - (this is the image)
<span class="button-hover" data-text="@item.Name"><span>@item.Name</span></span> -   (this is the button)

and this is my css:

.home #primary-nav li a span.overlay {
    position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%;
    background-color: rgba(12, 133, 191, 0.3); opacity: 0;  
}

*, :before, :after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.button,
[class*="button-"] {
    z-index:3;
    margin:0 -15px 0 -15px;
    position: absolute;
    font-family: 'Alright Sans', 'Trebuchet MS', Arial, sans-serif;
    font-size: 2.4em;
    font-weight:600; 
    text-transform: uppercase;
    overflow: hidden;
    line-height:0.8; 
    padding: 5px 5px 5px 5px;
    height: 33px;
    color: #fff;
    background-color: rgba(0,173,239,0.7);
    -webkit-transition: 0.35s ease all;
    -moz-transition: 0.35s ease all;
    -o-transition: 0.35s ease all;
    transition: 0.35s ease all;
}

.button-hover:hover
{
    line-height: 9em;
}

.button-hover:before {
    font-family: 'Alright Sans', 'Trebuchet MS', Arial, sans-serif; text-transform:       uppercase;
    content: attr(data-text);
    color: #DEEFF5;
    position: absolute;
    top: -3.99em;
}

Upvotes: 2

Views: 319

Answers (1)

Felipe Miosso
Felipe Miosso

Reputation: 7339

I don't know if I got this right, but ... try to add this line of code into your css 

.overlay:hover .button-hover{
   line-height: 9em;
}

Similar question: Trigger css background image position when hovering over parent div

Upvotes: 1

Related Questions