How to make image stay above text with average queries

Question

How to make image stay above text with average queries

Navigation

#1 by (1 votes)

0

I have a slide that has keyframes to do a basic animation but I need to add a media queries that when my screen has maximum 800px I wanted my image that is on the left side to be above the text text would stay below the image both centered in my section but I tried and it does not even move I do not know if this can be done with float or something else follow my code:

@import url("http://fonts.googleapis.com/css?family=Droid+Sans");

/* Positioning */

#slider #slides_image .slide.one {
  left: 400px;
  top: 0;
  -webkit-animation: fadeOne 16s infinite;
  -moz-animation: fadeOne 16s infinite;
  animation: fadeOne 16s infinite;
}
#slider #slides_image .slide.two {
  left: 900px;
  top: 500px;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-animation: fadeTwo 16s infinite;
  -moz-animation: fadeTwo 16s infinite;
  animation: fadeTwo 16s infinite;
}
#slider #slides_image .slide.three {
  left: 400px;
  top: 1000px;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-animation: fadeThree 16s infinite;
  -moz-animation: fadeThree 16s infinite;
  animation: fadeThree 16s infinite;
}
#slider #slides_image .slide.four {
  left: -100px;
  top: 500px;
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  transform: rotate(270deg);
  -webkit-animation: fadeFour 16s infinite;
  -moz-animation: fadeFour 16s infinite;
  animation: fadeFour 16s infinite;
}
#slider #slides_info .slide_info.one {
  left: 400px;
  top: 0;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-animation: fadeThree 16s infinite;
  -moz-animation: fadeThree 16s infinite;
  animation: fadeThree 16s infinite;
}
#slider #slides_info .slide_info.two {
  left: 800px;
  top: 400px;
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  transform: rotate(270deg);
  -webkit-animation: fadeFour 16s infinite;
  -moz-animation: fadeFour 16s infinite;
  animation: fadeFour 16s infinite;
}
#slider #slides_info .slide_info.three {
  left: 400px;
  bottom: 0;
  -webkit-animation: fadeOne 16s infinite;
  -moz-animation: fadeOne 16s infinite;
  animation: fadeOne 16s infinite;
}
#slider #slides_info .slide_info.four {
  left: 0;
  top: 400px;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-animation: fadeTwo 16s infinite;
  -moz-animation: fadeTwo 16s infinite;
  animation: fadeTwo 16s infinite;
}
/* Slider Styles */

#slider_wrapper {
  position: relative;
  margin: 30px auto;
  width: 1000px;
  height: 400px;
  overflow: hidden;
}
#slider {
  width: 900px;
  height: 300px;
  top: 50px;
  left: 50px;
  position: relative;
}
#slider #slides_image {
  position: absolute;
  top: 0;
  left: 0px;
  width: 1300px;
  height: 1300px;
  -webkit-animation: rotate 16s ease infinite;
  -moz-animation: rotate 16s ease infinite;
  animation: rotate 16s ease infinite;
}
#slider #slides_info {
  position: absolute;
  bottom: 0;
  left: -400px;
  width: 1100px;
  height: 1100px;
  -webkit-animation: rotate 16s ease infinite;
  -moz-animation: rotate 16s ease infinite;
  animation: rotate 16s ease infinite;
  z-index: 5;
}
#slider #slides_info .slide_info {
  width: 300px;
  height: 300px;
  position: absolute;
}
#slider #slides_image .slide {
  width: 500px;
  height: 300px;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  background: url(http://cdn1.iconfinder.com/data/icons/defaulticon/icons/png/256x256/media-pause.png) 50% 50% no-repeat;
}
/* Text Styles */

#slider #slides_info .slide_info h2 {
  color: #333;
  font-family: "Droid Sans", sans-serif;
  margin: 0;
  font-weight: normal;
  font-size: 24px;
  padding-bottom: 5px;
}
#slider #slides_info .slide_info p {
  color: #666;
  font: 13px/18px Arial, sans-serif;
  text-shadow: 1px 1px #eee;
}
/* Button */

#slider a.button {
  display: inline-block;
  height: 40px;
  background: transparent;
  padding: 0 15px;
  bottom: 0;
  left: 0;
  font: 13px/40px Arial, sans-serif;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border: 2px solid #353637;
  color: #333;
  text-decoration: none;
  cursor: pointer;
  margin-top: 40px;
  outline: none;
}
#btn-produtos {
  border: 2px solid #353637;
  padding: 17px;
  font-size: 15px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
#btn-produtos:hover {
  background-color: #353637;
  color: #fff;
}
#slider a.button:hover {
  background-color: #353637;
  color: #fff;
}
#slider:hover #slides_image,
#slider:hover #slides_info,
#slider:hover #slides_image .slide,
#slider:hover #slides_info .slide_info {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  animation-play-state: paused;
}
#slider:hover .slide img {
  filter: alpha(opacity=50);
  opacity: .5;
}
.equipamentos h1 {
  text-align: center;
  margin-top: 5%;
}
.equipamentos > p {
  margin: 0 auto;
  width: 45%;
}
@media screen and (max-width: 800px) {
  #slider_wrapper {
    height: 700px
  }
  #slides_image {
    display: inline-block;
    margin: 0 auto;
  }
  #slides_info {
    display: inline-block;
    margin: 0 auto;
  }
}
/* Animation Keyframes */

@-moz-keyframes rotate {
  0% {
    -moz-transform: rotate(0deg);
  }
  20% {
    -moz-transform: rotate(0deg);
  }
  25% {
    -moz-transform: rotate(-90deg);
  }
  45% {
    -moz-transform: rotate(-90deg);
  }
  50% {
    -moz-transform: rotate(-180deg);
  }
  70% {
    -moz-transform: rotate(-180deg);
  }
  75% {
    -moz-transform: rotate(-270deg);
  }
  95% {
    -moz-transform: rotate(-270deg);
  }
  100% {
    -moz-transform: rotate(-360deg);
  }
}
@-webkit-keyframes "rotate" {
  0% {
    -webkit-transform: rotate(0deg);
  }
  20% {
    -webkit-transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(-90deg);
  }
  45% {
    -webkit-transform: rotate(-90deg);
  }
  50% {
    -webkit-transform: rotate(-180deg);
  }
  70% {
    -webkit-transform: rotate(-180deg);
  }
  75% {
    -webkit-transform: rotate(-270deg);
  }
  95% {
    -webkit-transform: rotate(-270deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
  }
}
@keyframes "rotate" {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-90deg);
  }
  45% {
    transform: rotate(-90deg);
  }
  50% {
    transform: rotate(-180deg);
  }
  70% {
    transform: rotate(-180deg);
  }
  75% {
    transform: rotate(-270deg);
  }
  95% {
    transform: rotate(-270deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@-moz-keyframes fadeOne {
  0% {
    filter: alpha(opacity=100);
    opacity: 1;
  }
  20% {
    filter: alpha(opacity=100);
    opacity: 1;
  }
  22% {
    filter: alpha(opacity=0);
    opacity: 0;
  }
  30% {
    filter: alpha(opacity=0);
    opacity: 0;
  }
  100% {
    filter: alpha(opacity=100);
    opacity: 1;
  }
}
@-webkit-keyframes "fadeOne" {
  0% {
    filter: alpha(opacity=100);
    opacity: 1;
  }
  20% {
    filter: alpha(opacity=100);
    opacity: 1;
  }
  22% {
    filter: alpha(opacity=0);
    opacity: 0;
  }
  30% {
    filter: alpha(opacity=0);
    opacity: 0;
  }
  100% {
    filter: alpha(opacity=100);
    opacity: 1;
  }
}
@keyframes "fadeOne" {
  0% {
    filter: alpha(opacity=100);
    opacity: 1;
  }
  20% {
    filter: alpha(opacity=100);
    opacity: 1;
  }
  22% {
    filter: alpha(opacity=0);
    opacity: 0;
  }
  30% {
    filter: alpha(opacity=0);
    opacity: 0;
  }
  100% {
    filter: alpha(opacity=100);
    opacity: 1;
  }
}
@-moz-keyframes fadeTwo {
  0% {
    filter: alpha(opacity=100);
    opacity: 1;
  }
  45% {
    filter: alpha(opacity=100);
    opacity: 1;
  }
  47% {
    filter: alpha(opacity=0);
    opacity: 0;
  }
  55% {
    filter: alpha(opacity=0);
    opacity: 0;
  }
  100% {
    filter: alpha(opacity=100);
    opacity: 1;
  }
}
@-webkit-keyframes "fadeTwo" {
  0% {
    filter: alpha(opacity=100);
    opacity: 1;
  }
  45% {
    filter: alpha(opacity=100);
    opacity: 1;
  }
  47% {
    filter: alpha(opacity=0);
    opacity: 0;
  }
  55% {
    filter: alpha(opacity=0);
    opacity: 0;
  }
  100% {
    filter: alpha(opacity=100);
    opacity: 1;
  }
}
@keyframes "fadeTwo" {
  0% {
    filter: alpha(opacity=100);
    opacity: 1;
  }
  45% {
    filter: alpha(opacity=100);
    opacity: 1;
  }
  47% {
    filter: alpha(opacity=0);
    opacity: 0;
  }
  55% {
    filter: alpha(opacity=0);
    opacity: 0;
  }
  100% {
    filter: alpha(opacity=100);
    opacity: 1;
  }
}
@-moz-keyframes fadeThree {
  0% {
    filter: alpha(opacity=100);
    opacity: 1;
  }
  70% {
    filter: alpha(opacity=100);
    opacity: 1;
  }
  72% {
    filter: alpha(opacity=0);
    opacity: 0;
  }
  80% {
    filter: alpha(opacity=0);
    opacity: 0;
  }
  100% {
    filter: alpha(opacity=100);
    opacity: 1;
  }
}
@-webkit-keyframes "fadeThree" {
  0% {
    filter: alpha(opacity=100);
    opacity: 1;
  }
  70% {
    filter: alpha(opacity=100);
    opacity: 1;
  }
  72% {
    filter: alpha(opacity=0);
    opacity: 0;
  }
  80% {
    filter: alpha(opacity=0);
    opacity: 0;
  }
  100% {
    filter: alpha(opacity=100);
    opacity: 1;
  }
}
@keyframes "fadeThree" {
  0% {
    filter: alpha(opacity=100);
    opacity: 1;
  }
  70% {
    filter: alpha(opacity=100);
    opacity: 1;
  }
  72% {
    filter: alpha(opacity=0);
    opacity: 0;
  }
  80% {
    filter: alpha(opacity=0);
    opacity: 0;
  }
  100% {
    filter: alpha(opacity=100);
    opacity: 1;
  }
}
@-moz-keyframes fadeFour {
  0% {
    filter: alpha(opacity=0);
    opacity: 0;
  }
  5% {
    filter: alpha(opacity=0);
    opacity: 0;
  }
  95% {
    filter: alpha(opacity=100);
    opacity: 1;
  }
  97% {
    filter: alpha(opacity=0);
    opacity: 0;
  }
  100% {
    filter: alpha(opacity=0);
    opacity: 0;
  }
}
@-webkit-keyframes "fadeFour" {
  0% {
    filter: alpha(opacity=0);
    opacity: 0;
  }
  5% {
    filter: alpha(opacity=0);
    opacity: 0;
  }
  95% {
    filter: alpha(opacity=100);
    opacity: 1;
  }
  97% {
    filter: alpha(opacity=0);
    opacity: 0;
  }
  100% {
    filter: alpha(opacity=0);
    opacity: 0;
  }
}
@keyframes "fadeFour" {
  0% {
    filter: alpha(opacity=0);
    opacity: 0;
  }
  5% {
    filter: alpha(opacity=0);
    opacity: 0;
  }
  95% {
    filter: alpha(opacity=100);
    opacity: 1;
  }
  97% {
    filter: alpha(opacity=0);
    opacity: 0;
  }
  100% {
    filter: alpha(opacity=0);
    opacity: 0;
  }
}

<div id="slider_wrapper">
  <div id="slider">

    <div id="slides_info">
      <div class="slide_info one">
        <h2>Title Three</h2>
        <p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a
          sit amet mauris. Morbi accumsan ipsum velit.
        </p>
        <p>
          Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.
        </p>
        <a class="button" href="#">Visualizar</a>
        <a class="button" href="#showcase">Solicite um orçamento</a>
      </div>
      <div class="slide_info two">
        <h2>Title Four</h2>
        <p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a
          sit amet mauris. Morbi accumsan ipsum velit.
        </p>
        <p>
          Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.
        </p>
        <a class="button" href="#">Visualizar</a>
        <a class="button" href="#showcase">Solicite um orçamento</a>
      </div>
      <div class="slide_info three">
        <h2>Title One</h2>
        <p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a
          sit amet mauris. Morbi accumsan ipsum velit.
        </p>
        <p>
          Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.
        </p>
        <a class="button" href="#">Visualizar</a>
        <a class="button" href="#showcase">Solicite um orçamento</a>
      </div>
      <div class="slide_info four">
        <h2>Title Two</h2>
        <p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a
          sit amet mauris. Morbi accumsan ipsum velit.
        </p>
        <p>
          Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.
        </p>
        <a class="button" href="#">Visualizar</a>
        <a class="button" href="#showcase">Solicite um orçamento</a>
      </div>
    </div>

    <div id="slides_image">
      <div class="slide one">
        <img src="http://cssdeck.com/uploads/media/items/4/41tAxTu.png"/></div><divclass="slide two">
        <img src="http://cssdeck.com/uploads/media/items/1/1hjGftu.png"/></div><divclass="slide three">
        <img src="http://cssdeck.com/uploads/media/items/4/4OIJyak.png"/></div><divclass="slide four">
        <img src="http://cssdeck.com/uploads/media/items/6/68BYSto.png"/></div></div></div></div>

IwanttogetsomethinglikethisI'mnotsurehowtoleavetheimagepositioned:

html5 css3 media-queries

asked by anonymous 18.06.2015 / 15:45

1 answer

SQL query normalize accents, tilde Show only one view from a link

score 1 · Answer 1

You do not need to use float in this case. I like to use display:inline-block which is compatible with various CSS properties.

I just gave an example below. Use the display property with value inline-block .

@media screen and (max-width:800px){
    #imagem{
        display:inline-block;
        margin: auto;
    }
    #texto{
        display:inline-block;
        margin: auto;
    }
}