CSS: How to use Transform property on a bootstrap grid class


Tags: twitter-bootstrap,css3,css-transitions

Problem :

I am trying to use the transform property in CSS3 on a bootstrap a class="col-sm-4" div, the problem is I don't have a width or a height specified, and so the transform property is not working. Here is the current code

Bootstrap HTML

<div class="col-sm-4" class="threed">
    <div class="services-box">
        <img src="img/food-pic1.png" alt="food delivery" width="40%" height="30%">
        <h4> Food Delivery<hr></h4>
        <p> We delivery food straight to your doorstep. Now you don't have to worry about anything! </p>
    </div>
</div>

CSS

.row {
   margin-left: 0%;
}

Property I want to add (but doesn't work)

.col-sm-4:hover {
   box-shadow: 1px 1px #53a7ea,
               2px 2px #53a7ea,
               3px 3px #53a7ea;
   -webkit-transform: translateX(-3px);
   transform: translateX(-3px);
}

Any help would be appreciated!



Solution :

Don't apply css to bootstrap classes if you do so, the whole bootstrap classes in your website will get that css, so i will recommend using a custom class or to apply it on .col-sm-4 you should specify its parent to avoid applying css to whole website where col-sm-4 is used.

Here is a snippet

.threed{
 -webkit-transform: translateX(0);
   transform: translateX(0);
-webkit-transition:all 0.3s ease;
  transition:all 0.3s ease;
}

.threed:hover {
   box-shadow: 1px 1px #53a7ea,
               2px 2px #53a7ea,
               3px 3px #53a7ea;
   -webkit-transform: translateX(3px);
   transform: translateX(3px);
}
<div class="col-sm-4 threed">
    <div class="services-box">
        <img src="img/food-pic1.png" alt="food delivery" width="40%" height="30%">
        <h4> Food Delivery<hr></h4>
        <p> We delivery food straight to your doorstep. Now you don't have to worry about anything! </p>
    </div>
</div>


    CSS Howto..

    How to animate to position fixed?

    How can I use CSS transitions to animate a responsive layout's vertical orientation?

    How do I specify a css margin-top for foundation row div?

    How can one create horizontal tree view using CSS and HTML?

    Window resize shifts buttons to the bottom of the page. How to fix the css in this page?

    How to fix hover on transparent photo

    How do I get Jquery to toggle display

    How to position the element using absolute position?

    How do i add a fading border to my nav bar CSS

    How to make css background-blend-mode work with gradients?

    How to edit CSS file in Objective-C

    CSS how to target element beside my current element?

    How to completely remove borders from HTML table

    How to apply Hovering on html area tag?

    how to validate IE 7/8 CSS hacks?

    CSS - How to remove comments and make CSS one line

    Html/Css - How to get an image to stretch 100% width of a container then display another image over it?

    How to achieve this header with html and css?

    How do you prevent buttons from merging into each other with the .btn-group class in bootstrap?

    How to change CSS style without id or class

    How to position text over an image in css

    How can I call ajax, without “link_to” kind of helpers?

    How to remove the yellow row highlighting

    How make to flow around a triangular block?

    How to change the css of child and subchild menu's border together

    How do I align columns in the center of the page? [duplicate]

    css - jquery - how to remove wrapper div element?

    how to center image + text in an li Element

    How can I style jQuery-UI autocomplete differently than jQuery-UI tabs?

    How to get rid of white space between css horizontal list items? [duplicate]