CODEWITHSUNDEEP
css
muncherelli
muncherelli

Reputation: 2903

Links on top of image link breaks the image link

First, take a look at this: http://jsfiddle.net/muncherelli/1kkus9bd/1/

I'm having two issues with my HTML/CSS:

  1. There is a link that is wrapped around the img in this HTML. I would like there to be some text and other links on top of this image/link, but the image should still work as a link (and darken when you hover your mouse over it). Try removing the entire div with class "blog-post-feature-overlay-content" and you'll see it working properly, but once I add that div back in, it won't work.
  2. In order to have the image darken on hover, I am using the opacity selector with a background color of black. I also have a border rounding property that I am using to soften the corners of the image (and underlying div). There seems to be a black line on the bottom (below the image) and sometimes, depending on the width of my browser, some of the black peeks through the corners. How could I get rid of this?

One thing to consider: I am using bootstrap framework which I'm not sure is affecting or helping or hurting the situation.

(not sure if I need to ask two questions here but they seemed to be related).

Here is the HTML/CSS I'm using:

HTML:

<br />
<div class="container">
    <div class="row">
        <div class="hidden-xs hidden-sm col-md-1 col-lg-1"></div>
        <div class="col-xs-12 col-sm-12 col-md-10 col-lg-10 nopadding">
            <div class="blog-post-feature-overlay-container roundy">
                <a href="http://munchimages.com/blog/session-stories/2015/4th-of-july-shoot-with-teresa-diane">
                    <img src="http://cache.blog.munchimages.com/blog/wp-content/uploads/2015/07/MI_73-Feature-1200x620.jpg" class="img-responsive roundy blog-post-feature-image" />
                </a>
                <div class="blog-post-feature-overlay-content">
                    <div class="blog-post-feature-overlay-content-top text-right">
                        <a href="http://munchimages.com/blog/session-stories/2015/4th-of-july-shoot-with-teresa-diane" class="blog-category-box general-font-title-serif transition-color-ease-500">Latest Post</a>
                        <a href="http://munchimages.com/blog/session-stories/" class="blog-category-box general-font-title-serif transition-color-ease-500">Session Stories</a>
                    </div>
                    <div class="blog-post-feature-overlay-content-bottom">
                         <h1 class="general-font-title-serif">
                            <a href="http://munchimages.com/blog/session-stories/2015/4th-of-july-shoot-with-teresa-diane" class="blog-post-feature-overlay-content-title color-white transition-color-ease-500">
                                4th of July
                            </a>
                        </h1>
                    </div>
                </div>
            </div>
        </div>
        <div class="hidden-xs hidden-sm col-md-1 col-lg-1"></div>
    </div>
</div>

CSS:

.general-font-title-serif {
    font-family:'Cinzel', serif;
}
.nopadding {
    margin: 0 !important;
    padding: 0 !important;
}
.blog-post-feature-image:hover {
    opacity: 0.9;
}
.color-white {
    color: white;
}
.roundy {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
.transition-color-ease-500 {
    -moz-transition: background-color 500ms, color 500ms ease-out;
    -ms-transition: background-color 500ms, color 500ms ease-out;
    -o-transition: background-color 500ms, color 500ms ease-out;
    -webkit-transition: background-color 500ms, color 500ms ease-out;
    transition: background-color 500ms, color 500ms ease-out;
}
div.blog-post-feature-overlay-container {
    background-color: #000;
    position: relative;
}
div.blog-post-feature-overlay-content {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
div.blog-post-feature-overlay-content-top {
    position: absolute;
    right: 20px;
    top: 20px;
}
div.blog-post-feature-overlay-content-bottom {
    position: absolute;
    bottom: 20px;
    left: 20px;
}
a.blog-category-box {
    background-color: #ccc;
    background-color: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 13px;
    padding: 5px 15px;
    text-transform: uppercase;
}
a.blog-category-box:hover {
    background-color: rgba(0, 0, 0, 0.6);
    text-decoration: none;
}
a.blog-post-feature-overlay-content-title {
    text-shadow: 1px 1px #000;
}
a.blog-post-feature-overlay-content-title:hover {
    color: #ddd;
    text-decoration: none;
}
@media (max-width: 768px) {
    .roundy {
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        border-radius: 0;
    }
    h1 {
        font-size: 30px;
    }
}

Thanks!

Upvotes: 0

Views: 106

Answers (1)

user2541688
user2541688

Reputation:

remove position:absolute from div.blog-post-feature-overlay-content

div.blog-post-feature-overlay-content {
height: 100%;
width: 100%;
}

fiddle

when position: absolute; is used on this element it takes it out of the document flow, and the top:0 and left:0 places the element - although invisibly - relatively to its parent blog-post-feature-overlay-container covering it's entirety because 100% height and 100% width are set. by removingposition: absolute; the element remains in the document flow and sits behind the links (because they are positioned: absolutely), because it is placed before the element containing the the links in the document tree

Upvotes: 1

Related Questions