I am trying to add a zoom effect on hover of an image, I will post my code below:
<asp:TableRow>
<asp:TableCell CssClass="space">
<a href="www.google.com" id="myImage" runat="server">
<img src="Images/myIcon" style="border: none;" alt="my text goes here" /></a>
</asp:TableCell>
CSS:
.space {
padding-bottom: .6em;
}
.image:hover img {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
This is currently not running the hover css I have attached... any ideas of why it isn't running the hover css?
.image does not seem to be defined in your example:
.image:hover img {
try:
.space:hover img
use scale property to zoom and transition for animation
.img:hover
{
-moz-transform: scale(1.3);
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
and for complete tutorial click here http://talkerscode.com/webtricks/image-zoom-in-on-hover-using-css3.php
Related
I was trying to scale the anchor tag by using
a:hover { transform: scale(1.5) }
Just like I use h1:hover{ transform: scale(1.5); } to scale the heading.
But it's not working, the anchor tag doesn't scale.
If you use display:inline-block property unlike display:inline then you can scale the element.
HTML:
Go To Google
CSS
a:hover{
display:inline-block;
-ms-transform: scale(5.5, 5.5); /* IE 9 */
-webkit-transform: scale(5.5, 5.5); /* Safari */
transform: scale(5.5, 5.5);
}
You need to add the browser prefix:
a:hover
{
-ms-transform: scale(1.5, 1.5); /* IE 9 */
-webkit-transform: scale(1.5, 1.5); /* Safari */
transform: scale(1.5, 1.5);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<a class="btn btn-primary" href="#">anchor tag</a>
Scale doesn't work on inline elements, set a display: inline-block; for the anchor tag, that should work.
a{
display: inline-block;
}
Let me know if that helps you!
I try to make a little zoom effect on hover for some products. For that I scale the container of the image down to 95% and scale it too 100% on hover:
However the image scaled down apears blurry . I tried different solutions given in other Questions about this topic, like: backface-visibility, blur(0), translateZ. But nothing seems to change anything.
Is there a way to make this prettier or is this as good as it can get?
.container {
transform: scale(0.95);
transition: transform 70ms ease-in;
float: left;
}
.container:hover {
transform: scale(1);
}
<div class="container">
<img src="https://s28.postimg.org/kagu55chp/csm_632san_Amalfi_Pearl_ca02784e51.jpg" />
</div>
<div class="container">
<img src="https://s24.postimg.org/cdecsntlx/csm_594san_Amalfi_Silver_bbb138a25a.jpg" />
</div>
Add the following CSS to your img element (Not a safe hack cross-browser-wise):
img {
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}
Snippet below:
.container {
transform: scale(.95);
transition: transform 70ms ease-in;
float: left;
}
.container:hover {
transform: scale(1);
}
img {
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}
<div class="container">
<img src="https://s28.postimg.org/kagu55chp/csm_632san_Amalfi_Pearl_ca02784e51.jpg" />
</div>
<div class="container">
<img src="https://s24.postimg.org/cdecsntlx/csm_594san_Amalfi_Silver_bbb138a25a.jpg" />
</div>
Alternative 1: to avoid dimension altering properties, something like translate on img:
.container {
transition: transform 70ms ease-in;
float: left;
margin: 5px;
}
.container:hover img {
transform: translate(0, -3px);
}
<div class="container">
<img src="https://s28.postimg.org/kagu55chp/csm_632san_Amalfi_Pearl_ca02784e51.jpg" />
</div>
<div class="container">
<img src="https://s24.postimg.org/cdecsntlx/csm_594san_Amalfi_Silver_bbb138a25a.jpg" />
</div>
Alternative 2: box-shadow:
.container {
transition: transform 70ms ease-in;
float: left;
margin: 5px;
}
.container:hover img {
box-shadow: 0px 0px 5px #888888;
}
<div class="container">
<img src="https://s28.postimg.org/kagu55chp/csm_632san_Amalfi_Pearl_ca02784e51.jpg" />
</div>
<div class="container">
<img src="https://s24.postimg.org/cdecsntlx/csm_594san_Amalfi_Silver_bbb138a25a.jpg" />
</div>
I believe your issue runs in pixel interpolation: http://www.cambridgeincolour.com/tutorials/image-interpolation.htm
When an image is resized, the pixels must be adjusted. By shrinking, pixels are averaged and reduced. By enlarging, pixels are added and averages between pixels fill the gaps.
Please use an image editor like Photoshop or Gimpshop to resize the image, as an image program is better designed for this than a web browser.
On that note, certain percentages work better than others when it comes to browsers handling the interpolation. I've noticed it to typically be those on each quarter: 25%, 50%, 75% reduction and 125%, 150%, 175% enlargements tend to be handled better than other numbers (like 95% or 73%, etc.).
I want to change, when I click on image, the hover image position. Now* the image hover enlarge on bottom, and I want with enlargement on top (see the image link).
I have added this code :
HTML:
<div class="image"></div>
CSS:
.image { background:url(image url); height:50px; width:50px; }
.image:hover { background:url( image url ); height:400px; width:400px; }
Image:
try this
.image:hover {
cursor: pointer;
height:400px;
width: 400px;
transform:scale(1.5);
-ms-transform:scale(1.5); /* IE 9 */
-moz-transform:scale(1.5); /* Firefox */
-webkit-transform:scale(1.5); /* Safari and Chrome */
-o-transform:scale(1.5); /* Opera */
}
it works ..
I have written below code. But now the requirement is that the image should be rotated 180 degrees. How can I achieve this?
#cell {
background-image: url("../images/logo.PNG");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 0px 250px;
background-color: #FFFFFF;
border-left: 2px;
}
HTML tag:
<td width="2%" id="cell"/>
One cross-browser solution is
#cell {
-webkit-transform: rotate(180deg); /* Chrome and other webkit browsers */
-moz-transform: rotate(180deg); /* FF */
-o-transform: rotate(180deg); /* Opera */
-ms-transform: rotate(180deg); /* IE9 */
transform: rotate(180deg); /* W3C compliant browsers */
/* IE8 and below */
filter: progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=-1, DX=0, DY=0, SizingMethod='auto expand');
}
Note, that for IE8 and below, the rotation center point is not located in the center of the image (as it happens with all other browsers). So, for IE8 and below, you need to play with negative margins (or paddings) to shift the image up and left.
The element needs to be blocked. Other units that can be used are:
180deg = .5turn = 3.14159rad = 200grad
If you don't have any text in the <td> you can use transform: rotate(180deg); on it. If you do have text, this will rotate the text too. To prevent that you can put a <div> inside the <td>, put the text inside that, and rotate that 180 degrees (which puts it upright again).
Demo: http://jsfiddle.net/ThinkingStiff/jBHRH/
HTML:
<table>
<tr><td width="20%" id="cell"><div>right-side up<div></td></tr>
</table>
CSS:
#cell {
background-image: url(http://thinkingstiff.com/images/matt.jpg);
background-repeat: no-repeat;
background-size: contain;
color: white;
height: 150px;
transform: rotate(180deg);
width: 100px;
}
#cell div {
transform: rotate(180deg);
}
Output:
You can also try this axial type rotation OR rotation on Z-axis.
.box {
background: url('http://aashish.coolpage.biz/img/about/7.jpg');
width: 200px;
height: 200px;
transition: transform .5s linear;
transform-style: preserve-3D;
}
.box:hover {
transform: rotateY(180deg);
}
<div class="box"></div>
You can use CSS3 for this, but there are some browser issues:
transform: rotate(180deg);
Also look here: CSS3 rotate alternative?
image a complete black web page. On this web page is a 100% size white div that fills the whole page. I'd like to rotate this div by -7 degrees (or 7 degrees counter-clock wise).
This will result in the black background being visible in triangles on the edges, just like you had placed a piece of paper on a desk and turned it a bit to the left.
Actually this can be done with some css and it's working quite well (except for IE).
The real problem now is:
I'd like to have a normal, non-rotated div element on top of that to display the content in, so that only the background is rotated.
Rotating a contained div counterwise doesn't work though, because through the two transformations the text will be blurry in all browsers.
How can I realize that?
Best would be a solution workiing in current Webkit browsers, FF3.5+ and IE7+. If only IE8+ I could live with that too.
Try using
#content {
position: absolute;
z-index: 500;
margin-left: auto;
margin-right: auto;
}
#background {
//Your white DIV
}
<div id="background"></div>
<div id="content">
Lorem ipsum
</div>
Use position:absolute; on the background and z-index it to the back.
Here is an example.
You have to rotate it back... http://jsfiddle.net/gFCHE/
Not blurry at all on Chrome or ChromeOS. It shouldn't be anywhere else either.
Add overflow:hidden to #crooked for a cool effect with images.
This CSS will work to get you started but you'll need to tweak it to work as you want it.
<div id='wrap'>
<div id='cooked'>
<div id='straight'>
</div>
</div>
</div>
#wrap{
background:#000;
height:100%;
}
#crooked{
height:100%;
color:#f00;
-moz-transform: rotate(-7.0deg); /* FF3.5+ */
-o-transform: rotate(-7.0deg); /* Opera 10.5 */
-webkit-transform: rotate(-7.0deg); /* Saf3.1+, Chrome */
-ms-transform: rotate(-7.0deg); /* IE9 */
transform: rotate(-7.0deg);
filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
M11=0.992546151641322, M12=0.12186934340514748, M21=-0.12186934340514748, M22=0.992546151641322, sizingMethod='auto expand');
zoom: 1;
}
wrap{
background:#000;
height:100%;
}
#crooked{
height:100%;
background:#fff;
-moz-transform: rotate(-7.0deg); /* FF3.5+ */
-o-transform: rotate(-7.0deg); /* Opera 10.5 */
-webkit-transform: rotate(-7.0deg); /* Saf3.1+, Chrome */
-ms-transform: rotate(-7.0deg); /* IE9 */
transform: rotate(-7.0deg);
filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
M11=0.992546151641322, M12=0.12186934340514748, M21=-0.12186934340514748, M22=0.992546151641322, sizingMethod='auto expand');
zoom: 1;
}
#straight{
-moz-transform: rotate(7.0deg); /* FF3.5+ */
-o-transform: rotate(7.0deg); /* Opera 10.5 */
-webkit-transform: rotate(7.0deg); /* Saf3.1+, Chrome */
-ms-transform: rotate(7.0deg); /* IE9 */
transform: rotate(7.0deg);
filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
M11=0.992546151641322, M12=-0.12186934340514748, M21=0.12186934340514748, M22=0.992546151641322, sizingMethod='auto expand');
zoom: 1;