Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image over Image - Positioning problem

    Hello CodingForums.com members,

    I am kind of like making my first steps in working with CSS and I hope that you can help me with the following issue, which I am currently having...

    I am trying to overlay a picture (w/ transparent background) on a picture with hover.
    Additionally, my website is responsive and changes its layout at mobile devices.
    I want my picture to be centered with the text, but since I have a relatively positioned picture, it does not center itself.

    I would be very grateful if you could help me out...

    Here are some screenshots and the code:
    in CSS
    Code:
    .image { position: relative; width: 200px; height: 200px; }
    .image img { max-width: 100%; max-height: 100%; }
    .hoverimage { position: absolute; top: 0; left: 0; display: none; }
    .image:hover .hoverimage { display: block; }
    in HTML
    Code:
    <div class="four columns features-content">
    <div class="image"><a href="#" data-rel="prettyPhoto[pp_gal]" title=""><img src="images/goodlife.png" alt="Mr. Goodlife" />
    <img class="hoverimage" src="images/play.png" alt="" /></a>
    </div>
    <h5>Sophisticated</h5>
    <div class="features-description">
    <p>The dwellers in Saville Row would have been surprised the next day.</p>
    </div>
    </div>


    Thank you so much in advance guys!!

  • #2
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok got it
    I just added this following to the imags CSS:

    display: block; margin-left: auto; margin-right: auto;


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •