CSS활용 - 이미지 유형02

이미지유형 02번

이번에 만들어볼 사이트입니다.
마우스를 이미지에 올리면 자세히보기와 설명이 나오는 방식을 사용하였습니다.
피그마를 이용하여 이미지를 만들어 작업하였습니다.

CSS

img태그를 사용하여 이미지를 삽입하는 방식을 사용하였습니다.
hover라는 css요소를 사용하여 마우스가 이미지에 올라가면 설명이 나오도록 작업하였습니다.
처음에 image__desc를 -100px로 위치시켜 보이지 않게하고 가상요소를 주어서 마우스가 이미지에 올라가면 0px로 바뀌도록하였습니다.

 /* fonts */
@import url('https://webfontworld.github.io/gmarket/GmarketSans.css');

/* reset */
* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: #000;
}

img {
    width: 100%;
    vertical-align: top;
    /*이미지 여백 없애기*/
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
}

/* common 다른 유형에도 기본적으로 들어감*/
.container {
    width: 1160px;
    padding: 0 20px;
    margin: 0 auto;
    min-width: 1160px;
    overflow: hidden;
}

.section {
    padding: 120px 0;

}

.section>h2 {
    font-size: 50px;
    line-height: 1;
    text-align: center;
    margin-bottom: 20px;
}

.section>h2.tit {
    width: 1160px;
    padding: 0 20px;
    margin: 0 auto;
    min-width: 1160px;
    overflow: hidden;
    text-align: left;
    margin-bottom: 30px;
    border-top: 1px solid #000;
    position: relative;
}

.section>h2.tit span {
    background: #000;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    font-family: 'SebangGothic';
    padding: 5px 15px;
}

.section>p {
    font-size: 22px;
    font-weight: 300;
    color: #666;
    text-align: center;
    margin-bottom: 70px;
}

/* imageType02 */
.image__inner {
    display: flex;
    justify-content: space-between;
}

.image {
    width: 32%;
    position: relative;
    overflow: hidden;
}

.image__box {}

.image__box img {
    vertical-align: top;
    transition: all 0.5s ease-in-out;   /*오버효과가 진행되는 시간을 조절한다.*/

}

.image__desc {
    position: absolute;
    left: 0;
    bottom: -100px;
    width: 100%;
    text-align: center;
    height: 100px;
    backdrop-filter: blur(10px);
    padding: 23px 20px;
    box-sizing: border-box;
    transition: all 0.3s ease-in-out;
}

.img1 .image__desc {
    background: rgba(8, 11, 143, 0.3);
}

.img2 .image__desc {
    background: rgba(8, 11, 143, 0.3);
}

.img3 .image__desc {
    background: rgba(8, 11, 143, 0.3);
}

.img1 .image__desc h3 {
    color: rgba(8, 11, 143);
}

.img2 .image__desc h3 {
    color: rgba(8, 11, 143);
}

.img3 .image__desc h3 {
    color: rgba(8, 11, 143);
}

.image:hover .image__desc {  /*이미지에 마우스가 올라가면 내용이 bottom:0 으로 바뀐다.*/
    bottom: 0;
}

.image:hover .image__desc {  /*이미지에 마우스가 올라가면 이미지가 확대된다*/
    transform: scale(1.1);
}

.image__desc h3 {
    font-size: 24px;
    margin-bottom: 5px;
}

.image__desc .more {
    font-size: 16px;
    color: #fff;
}

.image__desc .more:hover {
    text-decoration: underline;
}

HTML

HTML입니다. section으로 전체를 묶어서 사용하였고 이미지와 내용을 container 영역을 만들어서 article을 만들고 그안에 이미지와 내용을 삽입하였습니다.

<section id="imageType02" class="section gmark">
    <h2>미술관</h2>
    <p>마우스를 이미지에 올리면 효과가 생기는 사이트는 만들어 보도록 하겠습니다.</p>
    <div class="image__inner container">
        <article class="image img1">
            <figure class="image__box">
                <img src="../art01.jpg" alt="">
            </figure>
            <div class="image__desc">
                <h3>현대미술</h3>
                <a href="" class="more" title="자세히 보기">자세히 보기</a>
            </div>
        </article>
        <article class="image img2">
            <figure class="image__box">
                <img src="../art02.jpg" alt="">
            </figure>
            <div class="image__desc">
                <h3>고대미술</h3>
                <a href="" class="more" title="자세히 보기">자세히 보기</a>
            </div>
        </article>
        <article class="image img3">
            <figure class="image__box">
                <img src="../art03.jpg" alt="">
            </figure>
            <div class="image__desc">
                <h3>르네상스</h3>
                <a href="" class="more" title="자세히 보기">자세히 보기</a>
            </div>
        </article>
    </div>
</section>

결과

깃허브 소스 보기