Transition 숙제

4 글 보임 - 1 에서 4 까지 (총 4 중에서)

글쓴이

글

2024년 2월 20일 16:29 #113806

참가자

 
overlay-black에서 min-height를 주지 않으면 블럭이 보이지 않는 현상

.overlay-black{
    position: absolute;
    width: 100%;
    height: 100%;
    min-height: 200px;
    background-color: rgba(0, 0, 0, 0.3);
    margin-top: 100%;
}

<div class="shop-bg">
        <div class="shop-container">
            <div class="shop-item">
                <div style="position: relative;">
                        <div class="overlay-black"></div>
                    < img src="img/product1.jpg">
                </div>
            </div>
            
            <div class="shop-item">
                < img src="img/product2.jpg">
            </div>
            
            <div class="shop-item">
                < img src="img/product3.jpg">
            </div>
        </div>
    </div>

2024년 2월 20일 20:24 #113855

codingapple

키 마스터

margin-top때매 밑으로 내려가있어서그런게아닐까요

2024년 2월 20일 20:42 #113865

채원

참가자

번거롭게 해서 죄송합니다.. ㅠ
.shop-bg {
    background-color: #eee;
    padding: 20px;
}
.shop-container {
    display: flex;
    width: 90%;
    margin: auto;
}
.shop-item {
    width: 33%;
    padding: 10px;
}
.shop-item img {
    width: 100%;
    display: block;
}

.overlay-black{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: black;
}

이렇게 되어있어요..근데

이렇게 나와요 ㅠㅠ
뭐가 문제일까유..

2024년 2월 20일 22:18 #113874

채원

참가자

버전 문제인가 하면서 찾아봤는데 해결했습니다 !!
답변 감사했습니다 !

글쓴이

글

4 글 보임 - 1 에서 4 까지 (총 4 중에서)

답변은 로그인 후 가능합니다.

로그인

https://codingapple.com/wp-content/uploads/2019/06/logo2-3.png