responsive image - showing a pixel line when you hover your mouse

Question

responsive image - showing a pixel line when you hover your mouse

Asked 5 years, 6 months ago

Viewed 36 times

0

I’m trying to adjust an image with an edge inside the table, but when resizing the window and passing the mouse a pixel line appears vertically on the right side of the image. I tried to fix removing margin and spacing in div, picture, table etc but the row keeps appearing I don’t know how I make that line go away

HTML below

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="newcss.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <nav id="item">
            <div class="table"><!-- tabela -->
                <div class="tr"><!-- linha -->
                    <div class="td"><!-- celula -->
                        <a href="mapas/" target="_blank"><!-- imagem principal -->
                            <div class="opacidade">
                                <img src="icone.png" class="imagem" title="" ><!-- icone -->
                            </div>
                            <p class="sub-titulo">Descreve sobre a imagem</p><!-- subtitulo da imagem -->
                        </a>
                    </div>
                    <div class="td"><!--celula-->
                        <a href="mapas/" target="_blank"><!-- imagem principal -->
                            <div class="opacidade">
                                <img src="icone.png" class="imagem" title="" ><!-- icone -->
                            </div>
                            <p class="sub-titulo">Descreve sobre a imagem</p><!-- subtitulo da imagem -->
                        </a>
                    </div>
                    <div class="td"><!--celula-->
                        <a href="mapas/" target="_blank"><!-- imagem principal -->
                            <div class="opacidade">
                                <img src="icone.png" class="imagem" title="" ><!-- icone -->
                            </div>
                            <p class="sub-titulo">Descreve sobre a imagem</p><!-- subtitulo da imagem -->
                        </a>
                    </div>
                </div>
            </div>
        </nav>
    </body>
</html>

CSS below

@charset "utf-8";

body{
    font-family: fonteTrebuchet;
    color: #333;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
}
nav#item .table {
    padding: 0px;
    margin: 20px auto 20px auto;
    width: 100%;
    display: table;
}
nav#item .tr {
    display: table-row;
}
nav#item .td {
    text-align: center;
    padding: 4px;
    margin: 0px;
    width: 33%;
    display: table-cell;
}
nav#item a{
    padding: 0px;
    margin: 0px;
}
nav#item div.opacidade{
    background: #111;
    padding: 0px;
    display: inline-block;
}
nav#item div.opacidade:hover img.imagem {
    border: solid 1px #d1d1d1;
    opacity: 0.7;
}
nav#item div.opacidade img.imagem {
    border: solid 1px #ddd;
    width: auto;
    display: block;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
}
nav#item .imagem{
    width: auto;
    max-width: 100%;
}
nav#item .sub-titulo{
    font-size: small;
    padding: 0;
    margin: 10px 0px 0px 0px;
}

Andrei, you’ve asked 10 questions, and none of them have you marked an answer as the best. Users voluntarily take the time to try to help you with answers, so the least you can do is reward users for the effort.

– Sam

2019/05/10 at 15:46

1 answer

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.

by Sam • **79,597** points · Answer 1 · 2019-05-03T18:30:39+00:00

The images with the edges are exceeding 2 pixels in the width of the div.opacidade, making sure that, in the transparency effect, the black background of the container does not "cover" the whole image, that is, 2 pixels to the right of the image is outside the black background, forming a "vertical line" (actually 2 pixels to the right is with the white background of the page).

You solve it by putting box-sizing: border-box; on the image so that the border is also inside the black background area:

nav#item div.opacidade img.imagem {
    border: solid 1px #ddd;
    width: auto;
    display: block;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
    box-sizing: border-box; /* AQUI! */
}

Learn more about box-Sizing on MDN.

With box-Sizing:

See that the image fits perfectly in the container.

No box-Sizing:

The image extrapolates (right) the area of the container because of the edges.