activating background overlay with link

Asked

Viewed 158 times

0

all right? I’m preparing a layout for a blog and need to do a slidershow more or less as follows:

inserir a descrição da imagem aqui

I can already do everything beauty via CSS but I have a problem! The picture only activates when the mouse passes over the div, the more I need the image to be activated or better be colored when you hover the mouse over the image link.

Somebody give me that help?

Follow my code via BOOTPLY

BOOTPLY

I don’t know if you have to do this via CSS or if you only do it via Javascript, I even tried to do it via javascript but I don’t know much about JS.

javascript jquery css3

  • You want the image to be "enabled" only when the mouse is over the link or also when passing over the image?

2 answers

1


To activate only on LINK will require a major change, this way to avoid having to redo all the code it is activating when you put on top of the <div class="over-text-feature"> containing the text.

I put the <div class="img-box-feature"> after the <div class="over-text-feature"> this way you can access with .over-text-feature:hover + div.img-box-feature use the operated + (Adjacent Sibling Selector) css causes you to select the adjacent sibling of the element based on your parent.

In this case Specific case it selects the next div.img-box-feature that is part of the same father of <div class="over-text-feature">.

Here is an example from Bootply

  • is exactly what I wanted to do! didn’t know this operator + in css! Living and learning!

0

Just insert the div over-text-feature inside the div img-box-featuremaking her your daughter, like this:

<div class="col-md-6 box-um">
  <div class="img-box-feature" style="background-image:url('http://lounge.obviousmag.org/a_boleia_da_ideia/2012/08/gatimonias-ou-maldita-curiosidade.html.jpg?v=20150627141437')">
    <div class="over-text-feature">
      <h1><a href="#">Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos</a></h1>
      <p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos</p>
    </div>
  </div>
</div>

Browser other questions tagged javascript jquery css3

You are not signed in. Login or sign up in order to post.