Orange underline on an image hover

Question

I need your help. Hope someone can teach me how do this. I want to have an orange underline on an image hover like on the "latest projects" on this template. I have no idea how to do that and I would like to know. Your answers would be highly appreciated ! This is my HTML.

<div class="sixteen columns">
        <h4 class="headline">Recent Work</h4>
    </div>

        <!-- 1/4 Column -->
        <div class="four columns">
                <div class="item-img"><a href="images/portfolio_images/portfolio_3_01_large.jpg" rel="imagebox" title="SockMonkee"><img src="images/portfolio_images/portfolio_3_01.jpg" alt=""/><div class="overlay zoom"></div></a></div>
                <div class="portfolio-item-meta">
                    <h5><a href="single_project.html">SockMonkee</a></h5>
                    <p>Aenean sit amet ligula est, conseact etur lectus. Maecenas hendrerit, lorem.</p>
                </div>
        </div>

        <!-- 1/4 Column -->
        <div class="four columns">
                <div class="item-img"><a href="single_project.html"><img src="images/portfolio_images/portfolio_3_06.jpg" alt=""/><div class="overlay zoom"></div></a></div>
                <div class="portfolio-item-meta">
                    <h5><a href="single_project.html">Franky Fisticuffs</a></h5>
                    <p>Aenean sit amet ligula est, conseact etur lectus. Maecenas hendrerit, lorem.</p>
                </div>
        </div>

        <!-- 1/4 Column -->
        <div class="four columns">
                <div class="item-img"><a href="single_project.html"><img src="images/portfolio_images/portfolio_3_04.jpg" alt=""/><div class="overlay zoom"></div></a></div>
                <div class="portfolio-item-meta">
                    <h5><a href="single_project.html">Package Project</a></h5>
                    <p>Gravida sit amet ligula eget conseact etur lectu aecenas hendrerit bibenea.</p>
                </div>
        </div>

        <!-- 1/4 Column -->
        <div class="four columns">
            <div class="item-img"><a href="images/portfolio_img_04_large.jpg" rel="imagebox" title="Ampertastic Mr. Fox"><img src="images/portfolio_img_04.jpg" alt=""/><div class="overlay zoom"></div></a></div>
            <div class="portfolio-item-meta">
                <h5><a href="single_project.html">Ampertastic Mr. Fox</a></h5>
                <p>Fermentum sit amet ligula estabe, eget conseact lectus maecenas hendrerit.</p>
            </div>
        </div>

    <div class="clearfix"></div>

And my CSS

.portfolio-item {margin-bottom: 20px;}

.portfolio-item-meta h5 {
    font-size: 12px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    line-height: 16px;
    padding: 12px 0 8px 0;
    margin: 0 0 8px 0;
    border-bottom: 1px solid #e7e7e7;
    letter-spacing: 0;
}

.portfolio-item-meta h5 span {
    display: block;
    color: #888;
    font-weight: normal;
    margin-top: 3px;
}

.portfolio-item-meta a{color:#444;}
.portfolio-item-meta a:hover {color:#888;}
.portfolio-item-meta p {color: #555;}

.item-img, .post-img {position: relative;}

.overlay {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 1;
    z-index: 40;
    opacity: 0;
    -moz-opacity: 0;
    filter:alpha(opacity=0);
    -webkit-transition: opacity 180ms ease-in-out;
    -moz-transition: opacity 180ms ease-in-out;
    -o-transition: opacity 180ms ease-in-out;
    transition: opacity 180ms ease-in-out;
}

.overlay.zoom {background: url(../images/overlay.png) no-repeat center center, url(../images/overlay_bg.png) center center;}

.overlay:hover {
    opacity: 1;
    -moz-opacity: 1;
    filter:alpha(opacity=100);
}

Well, inspect the element and you'll see it's styles. But basically it changes the border color using CSS3 transition. [Example](http://jsfiddle.net/qktLP/) — Vucko, Jul 24 '14 at 14:16

score 0 · Answer 1 · answered Jul 24 '14 at 14:17

0

Have you tried this?

.item-img:hover {border-bottom: 1px solid orange;}

if it works you will need to add

transition: all 0.1s linear

for example, but you can find more here: http://www.w3schools.com/css/css3_transitions.asp

answered Jul 24 '14 at 14:17

Alex Szabo

3,274
2
18
30

1

Don't forget browser prefixes: -webkit-transition: all 0.1s linear. Also you will probably want to add a transparent border (border-bottom: 1pd solid rgba(0, 0, 0, 0) to the images so they don't shift when border is added. – Jason Jul 24 '14 at 14:27
I tried, didn't work... Anyway, thank you for your help! – Stefan Alex Jul 24 '14 at 14:28
@Stefan Alex Just out from curiosity, does this work? .portfolio-item-meta:hover {border-bottom: 1px solid orange;} – Alex Szabo Jul 24 '14 at 14:35
Hey, Alex. Yes, it works now, but it's a problem. The orange underline appear only when the hover it's on text below the image. When I put the hover on image it didn't work. – Stefan Alex Jul 24 '14 at 14:39
Okay, we're getting there, let's try to tweak this a bit: .four columns:hover .portfolio-item-meta {border-bottom: 1px solid orange;}. If it won't work, you can try to add a > before the .portfolio-item-meta in the line I just wrote. See more: http://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered – Alex Szabo Jul 24 '14 at 14:47

Orange underline on an image hover

1 Answers1