How to make image stand above text with media queries

Asked

Viewed 97 times

0

I have a slide that has some keyframes to make a basic animation but need to add a media queries that when my screen has at most 800px I wanted my image that is on the left side stands above the text so the text would get below the image both centered on my Action however I tried and it does not move I do not know if this can be done with float or something else follows 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>
      <div class="slide two">
        <img src="http://cssdeck.com/uploads/media/items/1/1hjGftu.png" />
      </div>
      <div class="slide three">
        <img src="http://cssdeck.com/uploads/media/items/4/4OIJyak.png" />
      </div>
      <div class="slide four">
        <img src="http://cssdeck.com/uploads/media/items/6/68BYSto.png" />
      </div>
    </div>
  </div>
</div>

I want it to stay something so I’m not knowing how to leave the image positioned: inserir a descrição da imagem aqui

html5 css3 media-queries

1 answer

1

No need to use the float in that case. I like to use the display:inline-block which is compatible with various CSS properties.

I just made an example below. Use the property display worthwhile inline-block.

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

  • then @Diego Souza I put here and even so he did not move so I thought it was my id="slider_wrapper" that was blocking on account of the size but it was not I increased it a little more even so it does not move

  • 1

    Do you know Jsfiddle ? http://www.jsfiddle.net ? Make one with your code and post here. This will make it easier for us to understand the question.

  • I don’t know friend I can do so edit the post with my change that I made then it gets better I’ll edit there there

  • editei la amigo da a look at the media querie I made in css

  • 1

    Vixi. It’s a slider plugin. First, it disables these animations. Is it possible ? Let the slider pass only. If it doesn’t stay in this rotation, there is no way. Why are you with position absolute the elements. And you can’t if you do it. Another alternative is maybe you disable the slider in that resolution and do it in normal HTML. Alternatively, use Owl Carousel. I like it a lot because of its responsive features. http://owlgraphic.com/owlcarousel/

  • there is a way for me to do this without taking out the css type the efeit can be until another one has to be done with html and css and that and from a client the site understands and how she’s paying her that so has a hint of what can be done kind of put in another position without being that something thus

  • its second option "Another alternative maybe is you disable the slider in this resolution and do in normal HTML" as can be done I did not understand much more seems to be the one I need in the case how not to do the way this

Show 2 more comments

Browser other questions tagged html5 css3 media-queries

You are not signed in. Login or sign up in order to post.