CODEWITHSUNDEEP
htmlcss
bin
bin

Reputation: 1

The Pictures in li Tags are not Displayed

write HTML and CSS code to rotate pictures.

The code is as follows:

the background color: yellow and skyblue are right,however, the pictures in the <img> tag (included in the li tag with class are from <p1> to <p7>, 1.png to 77.jpg) are not showed.

When I press F12 to debug, I can see the position of these pictures, but the pictures are not displayed. The path of these pictures is right.

CSS:

.rotation_box{
    width: 100%;
    height: 340px;
    background-color:yellow;
    position:relative;
}
.list {
    width: 1200px;
    height: 300px;
    overflow: hidden;
    position:absolute;
    left:50%;
    margin-left:-600px;
    background-color: skyblue;

}
.list li{
    position:absolute;
    left:0;
    top:0;
    list-style: none;
    opacity:0;
    transition:all 0.3s ease-out;
}
.p7 {
    transform:translate3d(1120px,0,0) scale(0.81);
}
.p6 {
    transform:translate3d(896px,0,0) scale(0.81);
}
.p5 {
    transform:translate3d(672px,0,0) scale(0.81);
}
.p4 {
    transform:translate3d(449px,0,0) scale(0.81);
    transform-origin:100% 50%;
    opacity:0.8;
    z-index:2;
}
.p3 {
    transform:translate3d(224px,0,0) scale(1);
    z-index:3;
    opacity:1;
}
.p2 {
    transform:translate3d(0px,0,0) scale(0.81);
    transform-origin:0 50%;
    z-index:2;
    opacity:0.8;
}
.p1 {
    transform:translate3d(-224px,0,0) scale(0.81);
}
.list li img{
    width: 751px;
    height: 300px;
    border:none;
    float:left;
}

HTML:

<div class="rotation_box">
        <div class="list">
            <ul>
                <li class="p7"><a href="#"><img src="images/test/1.png" title=""/></a></li>
                <li class="p6"><a href="#"><img src="images/test/2.png" title=""/></a></li>
                <li class="p5"><a href="#"><img src="images/test/3.png" title=""//></a></li>
                <li class="p4"><a href="#"><img src="images/test/44.jpg" title=""/></a></li>
                <li class="p3"><a href="#"><img src="images/test/55.jpg" title=""/></a></li>
                <li class="p2"><a href="#"><img src="images/test/66.jpg" title=""/></a></li>
                <li class="p1"><a href="#"><img src="images/test/77.jpg" title=""/></a></li>
            </ul>
        </div>  
    </div>

could you please tell me the reason and how to solve it.

Upvotes: 0

Views: 81

Answers (2)

ShamPooSham
ShamPooSham

Reputation: 2379

Setting opacity to 0 will make them transparent. The opacity will be taken from .list li in every case because it has 2 selectors, while .p2, .p3, and .p4 only have one. If you write this it should work for those elements: 

.list li.p4 {
    transform:translate3d(449px,0,0) scale(0.81);
    transform-origin:100% 50%;
    opacity:0.8;
    z-index:2;
}
.list li.p3 {
    transform:translate3d(224px,0,0) scale(1);
    z-index:3;
    opacity:1;
}
.list li.p2 {
    transform:translate3d(0px,0,0) scale(0.81);
    transform-origin:0 50%;
    z-index:2;
    opacity:0.8;
}

Not sure why you have opacity set to 0 in the first place though.

Upvotes: 0

CodeBoyCode
CodeBoyCode

Reputation: 2267

The opacity of the .list li (the image) is set to 0 this should solve your issue by either removing or change this value to 1.

Upvotes: 1

Related Questions