landing page Portfolio 질문드립니다

[김윤호]

포트폴리오 이미지에 마우스를 올리면 박스 하나에만 border이 적용되는 게 아니라 모든 박스에 border이 적용되는 게 문제입니다.




어떤 게 문제일까요..

[codingapple]

사진말고 코드로 올려주십시오

[김윤호]

<div class="img-box-page">
        <div class="portfolio-bg-warp">
            <div class="portfolio-bg portfolio-bg-img1">
                <div class="border-white"></div>
                <div class="portfolio-text font-s">
                    <h3>Stationary</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur<br>adipisicing elit.</p>
                </div>
            </div>
            <div class="portfolio-bg portfolio-bg-img2">
                <div class="border-white"></div>
                <div class="portfolio-text font-s">
                    <h3>Stationary</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur <br>adipisicing elit.</p>
                </div>
            </div>
            <div class="portfolio-bg portfolio-bg-img3">
                <div class="border-white"></div>
                <div class="portfolio-text font-s">
                    <h3>Stationary</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur <br>adipisicing elit.</p>
                </div>
            </div>
            <div class="portfolio-bg portfolio-bg-img4">
                <div class="border-white"></div>
                <div class="portfolio-text font-s">
                    <h3>Stationary</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur <br>adipisicing elit.</p>
                </div>
            </div>
        </div>
    </div>

.img-box-page {
    width: 600px;
    height: 400px;
    margin: auto;
}

.portfolio-bg-warp {
    width: 100%;
    height: 100%;
    text-align: left;
}

.portfolio-bg-warp>h3 {
    color: white;
    font-size: 12px;
    
}

.portfolio-bg {
    position: relative;
    width: 300px;
    height: 200px;
    float: left;
    background-size: cover;
}

.portfolio-bg-img1 {
    background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.4)), url(../img/portfolio-1.jpeg);
}

.portfolio-bg-img2 {
    background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.4)), url(../img/portfolio-2.jpeg);
}

.portfolio-bg-img3 {
    background-image:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.4)), url(../img/portfolio-3.jpeg);
}

.portfolio-bg-img4 {
    background-image:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.4)), url(../img/portfolio-4.jpeg);
}
.portfolio-text {
    color: white;
    padding: 50px;
    width: 100%;
}

.border-white {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    border: 0px solid white;
}

.border-white:hover {
    border: 30px solid white;
}

[codingapple]

붙여넣어보니까 마우스 올리면 사진하나에만 테두리 잘 생깁니다 
다른 클래스명과 겹쳐서 그럴 수도 있습니다

[김윤호]

맥에서 새로운 파일을 만들어서 테스트 해도 똑같은 상황이길래 맥이 문제인 줄 알고 윈도우에서도 똑같이 새로운 파일 만들어서 테스트 해봤는데 똑같네요..ㅠㅠ

[codingapple]

다른거 다 빼고 위 코드만 붙여넣어봅시다

[글쓴이]

글