seo Question posted in
Some basic information to get you started with this can be found here.

Image hovers when mouse is in specific place – SEO

I have a problem with image hover. I’m creating agency page and I have “services” tab. There are 6 images, text and button.

I coded overlay when hover an image, but it doesn’t work correctly. It works when I place a mouse on a little part of image (for example it doesn’t work when I place a mouse on a middle of image).

I noticed there is a problem with my text div. When I deleted it, everything worked fine. Also when I changed height of this div it worked good, but my button changed it’s position.

If you have any idea how can I solve it, I will appreciate.

Here’s my HTML and Codepen:

    <div id="services">
     <div class="images">
        <div class="row1">
            <div class="img1">
            <img src="http://images82.fotosik.pl/266/994510792e940bac.jpg"/>
            <div class="imgHover"><p>Professional Analysys</p></div>
            </div>
                        <div class="img2">
                            <img src="http://images81.fotosik.pl/266/ba83ea8331da15ef.jpg" />
                            <div class="imgHover"><p>UX/UI Design</p></div>
                        </div>
                        <div class="img3">
                            <img src="http://images82.fotosik.pl/266/994510792e940bac.jpg" />
                            <div class="imgHover"><p>Strategy planning</p></div>
                        </div>
                    </div>

                    <div class="row2">
                        <div class="img4">
                            <img src="http://images81.fotosik.pl/266/ba83ea8331da15ef.jpg" />
                            <div class="imgHover"><p>SEO & SEM</p></div>
                        </div>
                        <div class="img5">
                            <img src="http://images82.fotosik.pl/266/994510792e940bac.jpg" />
                            <div class="imgHover"><p>Web Development</p></div>
                        </div>
                        <div class="img6">
                            <img src="http://images81.fotosik.pl/266/ba83ea8331da15ef.jpg" />
                            <div class="imgHover"><p>Social Media</p></div>
                        </div>
                    </div>
                </div>
  <div class="services-text">
                    <p>We specialize in delivering the best solutions for your business. Our professional team works every day to satisfy you and improve your incomes.</p>
                    <button href="#">Request a call</button>
                </div>
            </div>

http://codepen.io/anon/pen/BpaLRa

Tags:

3

Answers


  1. 0

    add z-index on images class

    .images {
    text-align: center;
    max-width: 750px;
    max-height: 1400px;
    margin: 0 auto;
    position: relative;
    bottom: 100px;
    z-index: 9;
}
    Login or Signup to reply.
  2. 0

    Add the following to your css:

    .row1, .row2 {
  overflow:hidden;
  clear:both;
}
    Login or Signup to reply.
  3. 0

    You need to use z-index on .images, it’s happening because positions creates layers, and z-index defines layer’s order.

    More info

    z-index

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search