[FIXED] How to hide a div while is outside of parent the div?

Issue

I tried to use the CSS property overflow: hidden

But the final renderer is not yet perfect. Indeed on my few tries I fail to remove extra piece of div outside of parent div.

I would like to get at the bottom right corner of the image a rotated and clipped div with the author name.

basic HTML code

<div class="mb-wrap mb-style">
    <div class="mb-thumb"></div>
    <blockquote cite="">
        <p>Je ne fais ni de l’Art pour l’Art, ni de l’Art contre l’Art. Je suis pour l’Art, <span>mais pour l’art qui n’a rien à voir avec l’Art, </span> car l’art a tout à voir avec la vie.</p>
    </blockquote>
    <div class="mb-attribution">
        <p class="mb-author">Robert Rauschenberg</p>
        <cite></cite>
    </div>
    <!-- #mb-attribution-->
</div>
<!--#mb-wrap-->

CSS code which rotates a div and tries to clip extra piece of div:

.mb-style {
    width: auto;
    padding: 20px 240px 50px 20px;
    background: #444 url(https://www.beart.fr/wp-content/uploads/2019/02/1998-Robert-Rauschenberg-Retrospectiva.jpg) no-repeat;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.6);
    overflow: hidden;
  backface-visibility: hidden;
}

.mb-style blockquote p {
    color: rgba(255,255,255,0.95);
    font-size: 21px;
    line-height: 26px;
    text-align: right;
    color: #999;
    text-transform: uppercase;
    font-weight: bold;
}

.mb-style blockquote p span {
    font-weight: 700;
    color: #fcf779;
    font-size: 58px;
    line-height: 58px;
    display: block;
    padding: 10px;
    text-shadow: 7px 7px 2px rgba(0,0,0,0.2);
    transform: rotate(-7deg) translateY(10px);
}

.mb-style blockquote p span:before {
    font-family: 'icons';
    content: '\275d'; 
    font-weight: normal;
    opacity: 0.1;
    font-size: 136px;
    position: absolute;
    color: #fff;
    top: -50px;
    left: -25px;
    transform: rotate(45deg);
}

.mb-style .mb-attribution {
    text-align: right;
    text-transform: uppercase;
    font-weight: bold;
    background: #757575;
    position: absolute;
    left: 0px;
    bottom: 0px;
    text-align: center;
    padding: 30px;
    transform: rotate(-40deg) translate(405px, 380px);
}

.mb-style .mb-author:before {
    content: '\2014';
    padding-right: 4px;
}

.mb-style .mb-attribution cite a{
    color: #777;
}

.mb-style .mb-attribution cite a:hover{
    color: #fcf779;
}

View on JSFiddle

Thanks for your help

Solution

Maybe, if you add to .mb-style class position:absolute property it will look like what you need

Answered By – Michael Cherniaev

Answer Checked By – Jay B. (FixeMe Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *