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 make my two sections vertically align, even when scaled, with different amounts of content?

    Browser sizing Ctrl +/- :: How to manipulate settings?

    CSS - How to center nested divs?

    How to get color property from CSS with jQuery?

    How to get a css animation to transition quicker in keyframes

    how to set equal font size in table cells for mobile device html pages

    How to apply class only for IE?

    How can I Highlight links only in Blog Posts with Mouseover?

    Sencha Touch 2: how to remove right arrow of datepickerfield by using css?

    How to keep the HTML element aligned when clicked/focused?

    How to apply remaining width to a div in the middle of 2 other divs

    How to make the content div scrollable without using javascript

    How to stop jquery loop function by a click while starting another loop function

    How to center text horizontally & vertically within dotted border

    How do I create a radial css3 border gradient shadow

    asp .net: how to change css on span tag in c#

    How to make links look like tabs using html/css?

    CSS: How to add icon/image after input element

    How can I style html/form elements using CSS?

    How to cancel out .table width:100% in bootstrap css

    How can I make all table cell sizes the same width in css?

    How do I add an image directly below a text header?

    How to make a different background for each link from a navbar? [closed]

    How to change the Color of dynamically created divs on click event, who are having same class?

    How to keep symmetry with CSS fluid spacing of dynamic content

    How to place Facebook send dialog box above other content?

    With css, how to ensure wrap on span boundary?

    How to change default value in counter-increment?

    HTML5 Modal Dialog is showing shortly on page load, how can i stop this?

    How to force style HTML element?