CODEWITHSUNDEEP
htmlcss
Sidney Sousa
Sidney Sousa

Reputation: 3584

Hover overlay box not getting full width

I am trying to make an overlay effect, but when I hover over the link, the inner content does not appear as full width as you can see from my pen when you hover over the box and the blue pops up

Here my code:

<div id="portfolio">
    <a href="" id="id-1" class="portfolio-link">
        <div class="portfolio-content">
            <div class="portfolio-overlay">
                <h5>Paragraph</h5>
            </div>
        </div>
    </a>

    <a href="" id="id-2" class="portfolio-link">
        <div class="portfolio-content">
            <div class="portfolio-overlay">
                <h5>Paragraph</h5>
            </div>
        </div>
    </a>

    <a href="" id="id-3" class="portfolio-link">
        <div class="portfolio-content">
            <div class="portfolio-overlay">
                <h5>Paragraph</h5>
            </div>
        </div>
    </a>

    <a href="" id="id-4" class="portfolio-link">
        <div class="portfolio-content">
            <div class="portfolio-overlay">
                <h5>Paragraph</h5>
            </div>
        </div>
    </a>
</div>

CSS:

h5{
  visibility: hidden;
}

div#portfolio {
    display: flex;
    flex-wrap: wrap;
}

div#portfolio a,
div#portfolio a > div{
    width: 100%;
    max-width: 25%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

div#portfolio a { 
    background-size: cover;
    background-position: 50%;
}

div#portfolio a:hover > div{
    background-color: blue;
}

div#portfolio a:hover h5{
    visibility: visible;
    transition: visibility .5s;
    -webkit-transition: visibility .5s;
}

#id-1{
   background-image: url(images/Sidney-web2web.png);
   background-color: black;
}

#id-2{
   background-image: url(images/Sidney-web2web.png);
   background-color: red;
}

How can I make that blue occupy the entire box?

Hope you can help

Upvotes: 0

Views: 108

Answers (2)

Matteo
Matteo

Reputation: 158

Simply split this: 

div#portfolio a,
div#portfolio a > div{
    width: 100%;
    max-width: 25%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

to this:

div#portfolio a {
    width: 100%;
    max-width: 25%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

div#portfolio a > div{
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

Upvotes: 0

mindOfAi
mindOfAi

Reputation: 4622

I've added position:absolute; inside your hover: 

div#portfolio a:hover > div{
    background-color: blue;
    position:absolute;
}

See full code below:

h5{
  visibility: hidden;
}

div#portfolio {
    display: flex;
    flex-wrap: wrap;
}

div#portfolio a,
div#portfolio a > div{
    width: 100%;
    max-width: 25%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

div#portfolio a { 
    background-size: cover;
    background-position: 50%;
}

div#portfolio a:hover > div{
    background-color: blue;
    position:absolute;
}

div#portfolio a:hover h5{
    visibility: visible;
    transition: visibility .5s;
    -webkit-transition: visibility .5s;
}

#id-1{
   background-image: url(images/Sidney-web2web.png);
   background-color: black;
}

#id-2{
   background-image: url(images/Sidney-web2web.png);
   background-color: red;
}
<div id="portfolio">
    <a href="" id="id-1" class="portfolio-link">
        <div class="portfolio-content">
            <div class="portfolio-overlay">
                <h5>Paragraph</h5>
            </div>
        </div>
    </a>

    <a href="" id="id-2" class="portfolio-link">
        <div class="portfolio-content">
            <div class="portfolio-overlay">
                <h5>Paragraph</h5>
            </div>
        </div>
    </a>

    <a href="" id="id-3" class="portfolio-link">
        <div class="portfolio-content">
            <div class="portfolio-overlay">
                <h5>Paragraph</h5>
            </div>
        </div>
    </a>

    <a href="" id="id-4" class="portfolio-link">
        <div class="portfolio-content">
            <div class="portfolio-overlay">
                <h5>Paragraph</h5>
            </div>
        </div>
    </a>
</div>

Hope this helps!

Upvotes: 1

Related Questions