CSS3에서 마우스로 그림을 터치하고 슬라이딩 블록으로 정보를 보여줍니다.

CSS3에서 마우스 터치 이미지, 슬라이딩 블록 표시 정보


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>    title>
    <style type="text/css">
        .box{
            /*         */
            width: 600px;
            height: 600px;
            /*         */
            margin: 10px auto 0;
            border: 1px solid pink;
            /*      */
            position: relative;
            /*    ，   */
            overflow: hidden;
        }

        .box img{
            /*         */
            width: 600px;
            height: 600px;
        }

        .box .pic_info{
            /*       ，  、  */
            width: 600px;
            height: 200px;
            /*     、    */
            background:rgba(0,0,0,0.5);
            /*        */
            color: #fff;
            /*      */
            position: absolute;
            left: 0;
            /*         ，             */
            top:600px;
            /*      、  、     */
            transition: all 500ms ease;
        }

        .box:hover .pic_info{
            /*      ，     ，        400px */
            top: 400px;
        }


    style>
head>
<body>
    <div class="box">
        <img src="4.jpg" alt="  ">
        <div class="pic_info">    ：       div>
    div>
body>
html>

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

어떻게 리의 앞에 있는 그 원점을 제거합니까

css 스타일의list-style-type 속성을none으로 설정하면 다음과 같은list-style-type:none로 코드할 수 있습니다. 다음 코드는 탭에 있습니다 탭을 제어할 수 있는 css 스타일 코드는 다음...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

CSS3에서 마우스로 그림을 터치하고 슬라이딩 블록으로 정보를 보여줍니다.

좋은 웹페이지 즐겨찾기