How to use CSS transforms to translate product info into view


Tags: html,css,css3,css-transitions,css-transforms

Problem :

I have a promotions container which looks like this - product

And on hover over the white bar at the bottom it should show like this - product-hover

I have a separate image of the white container at the bottom

My markup is as follows -

<div class="promo">
                    <div class="row">
                        <div class="col-md-12 col-xs-12 col-sm-12">
                            <div class="col-md-4 col-sm-4 col-xs-12 product">
                                <div class="img2 product-img"></div>
                            </div>
                            <div class="col-md-4 col-sm-4 col-xs-12 product">
                                <div class="img3 product-img"></div>
                            </div>
                            <div class="col-md-4 col-sm-4 col-xs-12 product">
                                <div class="img4 product-img"></div>
                            </div>
                        </div>
                    </div>
                </div>

And my CSS is as follows -

.promo {
  .row .product {
      padding: 0px 10px;
      .product-img {
          border: solid white 4px;
          background-size: cover;
          background-position: center;
          display: block;
          max-width: 100%;
          height: 260px;
      }
  }
  .img2 {
      background-image: url('../images/homepage/img2.png');
  }
  .img3 {
      background-image: url('../images/homepage/img3.png');
  }
  .img4 {
      background-image: url('../images/homepage/img4.png');
  }
  .img5 {
      background-image: url('../images/homepage/img5.png');
  }
}

How can I do this please can anyone suggest?



Solution :

HI now you can try to this css

.first{float:left;width:200px;
height:200px;
overflow:hidden;
  position:relative;
border:solid 1px red;}
.pic{
background:url('https://www.gravatar.com/avatar/ce057f24ff1111404b60d1ad2d77571c?s=32&d=identicon&r=PG&f=1') no-repeat 0 0;background-size:100% 100%;
width:200px;
  height:200px;
}

.text{
position:absolute;
  left:0;
  right:0;
  height:40px;
  bottom:0;
  background: #2098d1;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.text:before{
content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098d1;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.first:hover .text{
 height:120px;
}
.first:hover .text:before{
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}
<div class="first">
  <div class="pic"></div>
  <div class="text">
    <p>Hello i m text</p>
    <h3>Heading</h3>
    <p>Hi now again text</p>
  </div>
</div>


    CSS Howto..

    how to change collapse direction of a panel in bootstrap

    How to create a floating mutlicolumn layout in CSS (Flexbox, float, inline-block)?

    How to match a particular tag through css selectors where the class attribute contains spaces?

    how to nest css boxes with relative positioning and absolute positioning

    How to make a CSS border for a dropdown menu?

    How do I calculate percentage based on pixels for CSS conversion?

    How to align lists to top right?

    How to make this type of image popping out of box using XHTML css

    How to debug HTML/CSS for iPhone/iPad performance?

    How to shrink the menu when mouse hover on a link using jquery

    How to make like this gradient sun effect using CSS?

    How to get a textarea to fill in the height of a table column?

    how to set width,height etc to particular table in html

    How can I make images fit into a 200 pixel square box using CSS?

    Jquery how to get specific css values from css properties with stacked value options such as font-family

    How I do edit the css for just the home page on Magento?

    How do you tell which css class to modify?[Example inside]

    How to capture a CSS multiline comment block with JavaScript regex

    How to select an element that must have more than one css class?

    How can I change a table's column widths?

    In CSS, how to compute the percentage height within a `height:auto` parent?

    How to make a pure javascript .css() function using variable variables [duplicate]

    CSS: how to get scrollbars responsive for div inside container when user resizes it upwards

    How to add a css class programmatically to a piece of code?

    CSS: How to shrink first div in container instead of going outside of container

    I have a video background on my bootstrap page - how can I make it “fixed”?

    How to display inline input in li?

    How can I position a form with controls over a Google Map?

    javascript or css: How to Hide any Number followed by dot Prefix “1.text”, “2.text”…“30.text” from a Text inside a Label

    How to abruptly stop a linear animated jQueryUI slider handle (crossbrowser)