Div or image appears only inside another

Question

Div or image appears only inside another

Navigation

#1 by (2 votes)
#2 by (2 votes)

1

I would like to put a div or an image (preferably div, if it is possible) inside another one, for example, I wanted the Div not to appear outside the other if it is surpassing behind. href="https://i.stack.imgur.com/XBKF2.png">

In the example below, it shows well what I want, the first image is behind Evaluation, but above the black part, the image below, is over evaluation and duo, but I would like it to be below , or rather, that only appears within inner, the evaluation only appears the part that is inside the box.

html jquery html5 css css3

asked by anonymous 07.07.2016 / 16:22

2 answers

2

Use the overflow:hidden property, which defines what happens to the content of div if it "overflows" the size of div

07.07.2016 / 16:38

How to Rank in a List, The Most Accessed Table Link How to convert CamelCase to snake_case in PHP (in a simpler way)?

score 2 · Accepted Answer

In css include overflow:hidden and position:relative in the parent div, and play with the placement of elements ( left , top , right , bottom ). EX:

    div {
        width: 200px;
        height: 200px;
        position: relative;
        overflow: hidden;
    }
    .fita {
        width: 80px;
        position: absolute;
    }
    .fita:nth-child(1) {
        left: -20px;
        top: -5px;
        transform:rotate(-45deg);
    }
    .fita:nth-child(2) {
        right: -20px;
        top: -5px;
        transform:rotate(45deg);
    }
    .fita:nth-child(3) {
        left: -20px;
        bottom: -5px;
        transform:rotate(45deg);
    }
    .fita:nth-child(4) {
        right: -20px;
        bottom: -5px;
        transform:rotate(-45deg);
    }

<div>
    <img class="fita" src="https://pixabay.com/static/uploads/photo/2015/05/26/10/53/pink-784526_960_720.png"><imgclass="fita" src="https://pixabay.com/static/uploads/photo/2015/05/26/10/53/pink-784526_960_720.png"><imgclass="fita" src="https://pixabay.com/static/uploads/photo/2015/05/26/10/53/pink-784526_960_720.png"><imgclass="fita" src="https://pixabay.com/static/uploads/photo/2015/05/26/10/53/pink-784526_960_720.png"><imgsrc="http://www.personal.psu.edu/jul229/mini.jpg">
</div>

<br>
<br>
imagens Reais:
<br>
<img src="http://www.personal.psu.edu/jul229/mini.jpg"><br><imgclass="fita" src="https://pixabay.com/static/uploads/photo/2015/05/26/10/53/pink-784526_960_720.png">