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

Popular posts from this blog

php - Calling a template part from a post -

Firefox SVG shape not printing when it has stroke -

How to mention the localhost in android -