css - Is figure and figcaption not supported for adding css3 styles? -
i created website uses structure elements <figure>
, <figcaption>
. elements added css3 styles on external .css
.
if display page locally works perfect, if upload files not work. .html , .css file linked correctly. guess there still restrictions new "structure elements"?
my html5-code:
<ul class="items two_up tiles centered"> <li class="item"><figure> <img src="image.jpg" alt="image" data-original="image.jpg"> <figcaption> <h5>hello<span><a class="jackbox" data-group="featuredvideo" data-title="hello" data-description="#hello" href="http://www.google.com">view</a></span></h5> </figcaption> </figure></li>
my css3-code:
.items { width: 100%; clear: both; } .item {width:100%; height: 100%; margin-top:2%;} .items li img { display: block; } .items:after { content: ''; display: block; height: 0; clear: both; visibility: hidden; } .items li, .items li img { position: relative; } .items li { overflow: hidden } .items li figure figcaption h5 { display: block; padding: 10px 0; margin: 20% 20% 20% 20%; text-transform: uppercase; color: #ffd83f; opacity:0.9; font-size: 1.125em; font-family: "opensanssemi",sans-serif; text-align: center; } .items li figure figcaption h5 span a, .items li figure figcaption h5 span { font-size: 12px; color: #ddd; opacity:0.9; font-weight: 400; text-transform: none; letter-spacing: 0.2px; } .items li figure figcaption h5 span { display: block; margin-top: 15px; } .items li figure figcaption h5 span a:hover{ color:#ffd83f; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -ms-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; } .items li figure figcaption { position: absolute; left: auto; width: 100%; height: 100%; max-width:700px; max-height:350px; bottom: -100%; background-color:rgba(47, 67, 83, 0.7); -webkit-transition: bottom 0.4s ease; -moz-transition: bottom 0.4s ease-in-out; -ms-transition: bottom 0.4s ease-in-out; -o-transition: bottom 0.4s ease-in-out; transition: bottom 0.4s ease-in-out; } .items li figure:hover figcaption { bottom: 0px; }
does might know why not work if upload these files?
Comments
Post a Comment