Peter Hansen Peter Hansen - 10 days ago 7
CSS Question

Image doesn't flip with css

When I apply the class prev it doesn't flip the image.

I'm kinda stuck on why it does not work, I tried it with Chrome, Firefox and IE and none of them work.



.pbtn {
background-image: url('../../images/linkpil.png');
background-repeat: no-repeat;
display: inline-block;
float: left;
background-position: center center;
&.first {
display: none;
}
&.next {
background-color: #C9E2E5;
}
.prev {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
a {
overflow: hidden;
text-indent: -9999px; //hide text
height: 15px;
width: 15px;
display: inline-block;
}
}

<div class="pbtn">
<a href="http://sp16/sites/danbolig/Pages/Default.aspx?cache=clear&amp;driftPage=1" class="driftPageprev prev"></a>
<a href="http://sp16/sites/danbolig/Pages/Default.aspx?cache=clear&amp;driftPage=1" class="driftPagenext next"></a>
</div>




Answer

From your less code, it looks like your html has to be this.

<div class="pbtn next">
  <a href="http://sp16/sites/danbolig/Pages/Default.aspx?cache=clear&amp;driftPage=1" class="driftPagenext"></a>
</div>
<div class="pbtn prev">
  <a href="http://sp16/sites/danbolig/Pages/Default.aspx?cache=clear&amp;driftPage=1" class="driftPageprev"></a>
</div>

and replace

&.next {
background-color: #C9E2E5;
}
.prev {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}

With:

&.next {
background-color: #C9E2E5;
}
&.prev {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}