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 đỡ.
09d00087371ef05a6b5e32071516ba7f.jpg

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 ạ !!
 

VipByTeam

Vô hình - Vô Danh
Đâ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);
}
 

Thống kê

Chủ đề
101,748
Bài viết
469,063
Thành viên
340,213
Thành viên mới nhất
bconshomesvn
Top