kết quả từ 1 tới 3 trên 3

Giúp mình js và css khi di chuột vào ảnh thì hiện text trong div

  1. #1
    Ðến Từ
    Yên Bái
    Thành Viên Thứ: 219423
    Giới tính: Nam
    Bài gửi
    11

    Giúp mình js và css khi di chuột vào ảnh thì hiện text trong div

    Chào anh em DĐBL!
    Em hiện đang mò mò làm Blog. Về khoản js với css em khá là dốt. Hiện em đang có một vấn đề đang rất mong được các bro giúp đỡ.

    Như trong ảnh ạ. Em muốn khi di chuột vào mỗi ảnh thì sẽ show text tương ứng với ảnh đó trong 1 thẻ div ở bên dưới ạ :chaymau:
    Mong mọi người giúp đỡ. Em xin cảm ơn trước ạ !!
    Quick reply to this message Trả lời       

  2. #2
    Ðến Từ
    Thanh Hóa
    Thành Viên Thứ: 236210
    Giới tính: Nam
    Bài gửi
    26

    Reply: Giúp mình js và css khi di chuột vào ảnh thì hiện text trong div

    bác dùng tính năng copy đi cho nhanh ạ ngày trước iêm cũng copy mà giờ quên hết rồi
    Mã:
    www.famtinhban.tk

  3. #3
    Ðến Từ
    TP. Hồ Chí Minh
    Thành Viên Thứ: 236321
    Giới tính: Nam
    Bài gửi
    20

    Reply: Giúp mình js và css khi di chuột vào ảnh thì hiện text trong div

    Đây bạn:
    HTML:
    Mã:
            <!-- VipByTeam Caption -->
    <div id="mainwrapper">
            <div id="box-1" class="boxzz">
                                    <img src="styles/noimg.jpg" />
                    <span class="caption simple-caption">
                        <p>Tiêu đề xuất hiện khi rê chuột</p>
                    </span>
            </div>
    </div>
    CSS:
    Mã:
    #mainwrapper {
        -font: 10pt normal Arial, sans-serif;
        -height: auto;
        -margin: 80px auto 0 auto;
        -text-align: center;
        -width: 660px;
    }
    
    
    /* Image Box Style */
    #mainwrapper .boxzz {
        -border: 5px solid #fff;
        cursor: pointer;
        -height: 182px;
        -float: left;
        -margin: 5px;
        position: relative;
        overflow: hidden;
        -width: 200px;
            --webkit-box-shadow: 1px 1px 1px 1px #ccc;
            --moz-box-shadow: 1px 1px 1px 1px #ccc;
            -box-shadow: 1px 1px 1px 1px #ccc;
    }
    #mainwrapper .boxzz img {
        -position: absolute;
        left: 0;
            -webkit-transition: all 300ms ease-out;
            -moz-transition: all 300ms ease-out;
            -o-transition: all 300ms ease-out;
            -ms-transition: all 300ms ease-out;    
        transition: all 300ms ease-out;
    }
    
    
    /* Caption Common Style */
    #mainwrapper .boxzz .caption {
        background-color: rgba(0,0,0,0.8);
        position: absolute;
        color: #fff;
        z-index: 100;
            -webkit-transition: all 300ms ease-out;
            -moz-transition: all 300ms ease-out;
            -o-transition: all 300ms ease-out;
            -ms-transition: all 300ms ease-out;    
            transition: all 300ms ease-out;
        left: 0;
    }
    
    
    
    
    /** Caption 1: Simple **/
    #mainwrapper .boxzz .simple-caption {
        -height: 30px;
        width: 100%;
        display: block;
        -bottom: -30px;
        -line-height: 25pt;
        text-align: center;
    }
    
    
    /** Caption 2: Full Width & Height **/
    #mainwrapper .boxzz .full-caption {
        width: 170px;
        height: 170px;    
        top: -200px;
        text-align: left;
        padding: 15px;
    }
    
    
    /** Caption 3: Fade **/
    #mainwrapper .boxzz .fade-caption, #mainwrapper .boxzz .scale-caption  {
        opacity: 0;
        width: 170px;
        height: 170px;
        text-align: left;
        padding: 15px;
    }
    
    
    /** Caption 4: Slide **/
    #mainwrapper .boxzz .slide-caption {
        width: 170px;
        height: 170px;    
        text-align: left;
        padding: 15px;
        left: 200px;
    }
    
    
    /** Caption 5: Rotate **/
    #mainwrapper #box-5.boxzz .rotate-caption {
        width: 170px;
        height: 170px;    
        text-align: left;
        padding: 15px;
        top: 200px;
        -moz-transform: rotate(-180deg);
        -o-transform: rotate(-180deg);
        -webkit-transform: rotate(-180deg);
        transform: rotate(-180deg);
    }
    
    
    #mainwrapper .boxzz .rotate {
        width: 200px;
        height: 400px;
        -webkit-transition: all 300ms ease-out;
        -moz-transition: all 300ms ease-out;
        -o-transition: all 300ms ease-out;
        -ms-transition: all 300ms ease-out;    
        transition: all 300ms ease-out;
    }
    
    
    /** Caption 6: Scale **/
    #mainwrapper .boxzz .scale-caption h3, #mainwrapper .boxzz .scale-caption p {
        position: relative;
        left: -200px;
        width: 170px;
        -webkit-transition: all 300ms ease-out;
        -moz-transition: all 300ms ease-out;
        -o-transition: all 300ms ease-out;
        -ms-transition: all 300ms ease-out;    
        transition: all 300ms ease-out;
    }
    
    
    #mainwrapper .boxzz .scale-caption h3 {
        -webkit-transition-delay: 300ms;
        -moz-transition-delay: 300ms;
        -o-transition-delay: 300ms;
        -ms-transition-delay: 300ms;    
        transition-delay: 300ms;
    }
    
    
    #mainwrapper .boxzz .scale-caption p {
        -webkit-transition-delay: 500ms;
        -moz-transition-delay: 500ms;
        -o-transition-delay: 500ms;
        -ms-transition-delay: 500ms;    
        transition-delay: 500ms;
    }
    
    
    /** Simple Caption :hover Behaviour **/
    #mainwrapper .boxzz:hover .simple-caption {
        -moz-transform: translateY(-100%);
        -o-transform: translateY(-100%);
        -webkit-transform: translateY(-100%);
        opacity: 1;
        transform: translateY(-100%);
    }
    
    
    /** Full Caption :hover Behaviour **/
    #mainwrapper .boxzz:hover .full-caption {
        -moz-transform: translateY(100%);
        -o-transform: translateY(100%);
        -webkit-transform: translateY(100%);
        opacity: 1;
        transform: translateY(100%);
    }
    
    
    /** Fade Caption :hover Behaviour **/
    #mainwrapper .boxzz:hover .fade-caption, #mainwrapper .boxzz:hover .scale-caption  {
        opacity: 1;
    }
    
    
    /** Slide Caption :hover Behaviour **/
    #mainwrapper .boxzz:hover .slide-caption {
        background-color: rgba(0,0,0,1) !important;
        -moz-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        opacity: 1;
        transform: translateX(-100%);
    }
    #mainwrapper .boxzz:hover img#image-4 {
        -moz-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 1;
    }
    
    
    /** Rotate Caption :hover Behaviour **/
    #mainwrapper .boxzz:hover .rotate {
        background-color: rgba(0,0,0,1) !important;
        -moz-transform: rotate(-180deg);
        -o-transform: rotate(-180deg);
        -webkit-transform: rotate(-180deg);
        transform: rotate(-180deg);
    }
    
    
    /** Scale Caption :hover Behaviour **/
    #mainwrapper .boxzz:hover #image-6 {
        -moz-transform: scale(1.4);
        -o-transform: scale(1.4);
        -webkit-transform: scale(1.4);
        transform: scale(1.4);
    }
    
    
    #mainwrapper .boxzz:hover .scale-caption h3, #mainwrapper .boxzz:hover .scale-caption p {
        -moz-transform: translateX(200px);
        -o-transform: translateX(200px);
        -webkit-transform: translateX(200px);
        transform: translateX(200px);
    }