Tuesday, 20 January 2015

Opacity css browser compatibility

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
                                filter: alpha(opacity=60);
                                -khtml-opacity: 0.6;
                                opacity: 0.6;                       


Monday, 19 January 2015

How to Replace text using attribute selector in css

/*Replace text using css*/

li a[title="Previous page"] {visibility:hidden}
li a[title="Previous page"]:after{content:"< Previous";visibility:visible}


<a href="#" title="Previous page"> &lt;</a>

Monday, 12 January 2015

CSS3 transition of background-image for Firefox not working solution

Add this on style or css file
    width: 400px;
    height: 150px;
    position: relative;
    border: 1px solid green;

.hr-box:before, .hr-box:after {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    opacity: 1;
.hr-box:before {
    background-image: url(hr-img1.jpg);
    z-index: 1;
    transition: opacity 2s;

.hr-box:after {
    background-image: url(hr-img2.jpg);

.hr-box:hover:before {
    opacity: 0;

Add this on body tag
<div class="hr-box"></div>