How to prevent the edge from affecting child elements

Asked

Viewed 222 times

1

how do I add edge to a img correctly because I am adding the edge to the img and it seems to get bigger than the others. I am adding by click using jquery when I click on img mark her with a 2px green border as do not happen to add the edge and the img not increase?

$('input[type=checkbox]').on('change', function () {
    var total = $('input[type=checkbox]:checked').length;
   	$("#count").text("Fotos selecionadas: " + total);
   	$(this).closest('.hovereffect').toggleClass('clic');
});
.hovereffect {
    width:100%;
    height:100%;
    float:left;
    overflow:hidden;
    position:relative;
    margin-bottom: 25px;
    text-align:center;
    cursor:default;
    box-shadow: 0px 0px 5px 1px rgba(0,0,0,.2);
}

.hovereffect .overlay {
    width:100%;
    height:100%;
    position:absolute;
    overflow:hidden;
    top:0;
    padding: 15px;
    left:0;
    opacity:0;
    background-color:rgba(0,0,0,0.5);
    -webkit-transition:all .4s ease-in-out;
    transition:all .4s ease-in-out
}

.hovereffect img {
    display:block;
    position:relative;
    -webkit-transition:all .4s linear;
    transition:all .4s linear;
}

.hovereffect h2 {
    /*text-transform:uppercase;*/
    color:#fff;
    text-align:center;
    position:relative;
    font-size:22px;
    /*background:rgba(0,0,0,0.6);*/
    -webkit-transform:translatey(-100px);
    -ms-transform:translatey(-100px);
    transform:translatey(-100px);
    -webkit-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out;
    padding:10px;
}

.hovereffect a.info {
    text-decoration:none;
    display:inline-block;
    text-transform:uppercase;
    color:#fff;
    /*border:1px solid #fff;*/
    background-color:transparent;
    opacity:0;
    filter:alpha(opacity=0);
    -webkit-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out;
    margin:0 0 0;
    padding:7px 14px;
}

.hovereffect a.info:hover {
/*box-shadow:0 0 5px #fff;*/
}

.hovereffect:hover img {
    -ms-transform:scale(1.2);
    -webkit-transform:scale(1.2);
    transform:scale(1.2);
}

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

.hovereffect:hover h2,.hovereffect:hover a.info {
    opacity:1;
    filter:alpha(opacity=100);
    -ms-transform:translatey(0);
    -webkit-transform:translatey(0);
    transform:translatey(0);
}

.hovereffect:hover a.info {
    -webkit-transition-delay:.2s;
    transition-delay:.2s;
}

.col-lg-3{
    width: 30%;
}

.bloco{
    background-color: rgba(0,0,0,0.67);
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    padding: 17px;
    top: 0;
    -webkit-transition: all .4s ease-out;
}

h2{
    font-family: 'Courgette', cursive;
}

.corr{
    background-color: #2ecc71;
    width: 40px;
    height: 40px;
    border-radius: 30px;
    position: absolute;
    padding: 10px;
    margin-top: -10px;
    /* margin: 0 auto; */
    left: 0;
    /* top: 50%; */
}

.btn-group, .btn-group-vertical{
    position: absolute;
    top: 50px;
    left: 50%;
    margin-left: -43px;
}

.clic{
    border: 3px solid #1abc9c;
}
#count{
    font-family: 'Courgette', cursive;
}
.sweet-alert{
    border-radius: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row">
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
            <div class="hovereffect">
                <img class="img-responsive" src="http://guanambiacontece.com/wp-content/uploads/2016/01/iron-man-rep-300x200.jpg">
                <div class="overlay">
                    <div class="pad">
                        <h2></h2>
                        <div class="btn-group" data-toggle="buttons">
                            <label class="check btn btn-primary">
                                <input type="checkbox" name="ck[]">Selecionar</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

https://jsfiddle.net/tob0b5ak/3/

css

  • I’ve gone up to 1 min only

  • face the code and this is only the border the code is already in Perg posted the img to exemplify

  • You didn’t put the selector and HTML, it’s kind of hard to deduce. But okay, test the answers below, if nothing goes right post html and CSS so that we can reproduce the problem, ;)

  • our and vdd I only put one thing vo arrange mals

  • arranged my question

  • yes it repeats for every img you have in the bank

  • you do here in a little while update

  • updated the response with the jsfiddle link

  • like that descent of the img when I select and normal that?

  • intendi obg for the answer

  • I don’t function like when you click on img it seems that it gives a 3px padding in img

Show 6 more comments

3 answers

3

Use box-sizing with the property border-box

So the edge will stay inside and not out.

div {
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        width: 100px;
        height: 100px;
        border: 20px solid #f00;
        background: #00f;
        margin: 10px;
    }

div + div {
border: 10px solid red;
}
<div>Olá</div>
<div>Olá</div>

2

This is because the edge is added out by default.

To solve, set the attribute box-sizing

This will cause the edge to stay inside the element.

.out, .in {

    width: 200px;
    height: 200px;
    border: 10px solid #ff0000;
    margin: 0px;
    padding: 0px;
}
.in {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
<div class="in">border in</div>
<div class="out">border out</div>

  • +1. But no longer need to use prefixes (unless you are supporting an IE < 8).

  • @Renan android users 2.3 and 3... iOS and other mobiles do not need. -moz-box-sizing I have not seen any case of need. There are still many users of Android2.3 and 3 ;)

1


The effect is exactly this same, both with box-sizing: border-box; or not, because it is not the image that received the border but an element parent and this affects the image.

The solution is not to use edge, maybe to use box-shadow resolve (in case the image was on top of the test, I will update the answer later and put an example with box-shadow) or else you can create an extra element put position:absolute in it too, removes this:

And then add this:

.border-overlay {
    position: absolute;
    z-index: 9999;
    border: 3px solid #1abc9c;
    opacity: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: opacity .4s ease-out;
}
.clic .border-overlay {
  opacity: 1;
  display: block;
}

And the html should look like this:

<div class="container">
    <div class="row">
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
            <div class="hovereffect">
                <img class="img-responsive" src="http://guanambiacontece.com/wp-content/uploads/2016/01/iron-man-rep-300x200.jpg">
                <div class="border-overlay"></div>
                <div class="overlay">
                    <div class="pad">
                        <h2></h2>
                        <div class="btn-group" data-toggle="buttons">
                            <label class="check btn btn-primary">
                                <input type="checkbox" name="ck[]">Selecionar</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

NOTE: swap all -webkit-transition: for transition: only, as this will work in browsers like Firefox (if you want compatibility for older browsers keep both -webkit-transition and transition)

  • Jeez an unfair downvote, please justify... If you haven’t noticed Mr. Downvoter the solution with box-sizing does not work because the problem is an internal element, its negative vote shows that it did not understand the problem of the author of the question... it shows that it is only an ignorant.

Browser other questions tagged css

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