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 ..
Related
I use fullPage.js and the following html and css for the image slider on my website.
It works in Safari and Chrome on Mac but not in IE 11 on Windows.
Has anybody an idea how to fix this?
Demo: www.aronsommer.com
<div class="slide"><img src="images/bitumenpainting1.jpg" alt="Bitumenpainting 1"></div>
.slide img {
width : auto;
height : auto;
max-width : 90%;
max-height : 90%;
margin : 0 auto;
padding : 0;
display : block;
}
Sorry. It's easier if you treat the CSS file. You need some CSS Hacks, it's something like the exemple bellow:
/* IE7 */
*:first-child+html #element { color: red }
/* IE7, FF, Safari, Opera */
html>body #elemento { color: red }
/* IE8, FF, Safari, Opera (Everything but IE 6,7) */
html>/**/ body #elemento { color: red }
/* Opera 9.27 and safari 2 */
html:first-child #element { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #element { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #element { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #element { color: red }
/* saf3+, chrome1+ */
#media screen and (-webkit-min-device-pixel-ratio:0) {
#element { color: red }
}
/* iPhone / mobile webkit */
#media screen and (max-device-width: 480px) {
#element { color: red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #element { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #element { color: red }
/* Tudo menos IE6-8 */
:root *> #element { color: red }
/* IE7 */
*+html #element { color: red }
/* Firefox 3.0+ */
#element, x:-moz-any-link, x:default { color: red }
You need to change all your CSS to program with the browser compatibility.
I hope this helps
Following media query has fixed my problem with IE 11.
Using viewport units vw and vh instead of percentage for max-width and max-height.
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
.slide img {
max-width : 90vw;
max-height : 90vh;
}
}
This seems to be a bug in IE11: Bug Report. Adding flex: 1 (as in the report)
.slide img {
flex: 1
max-width: 100%
max-height: 100%
}
Works for me. You may have to change your containers display mode to flexbox. Like so (example centers content):
.slide {
display: flex
align-items: center
justify-content: center
width: whateveryoulike
height: whateveryoulike
}
Very nasty bug!
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
I have a large div with a small image inside of it. I want to make the image fade when I hover over the div, even when the mouse isn't directly over the image itself.
The div is much bigger than the image, so I'm not going to add transparency around the image or change the image size or anything like that.
I just want it to fade when the mouse hovers over the div it's in.
Here's the code I have so far, but it won't be useful:
<div id="left">
<img id="logoLeft" src="http://i.imgur.com/CJ7el5l.png" />
</div>
CSS
#left {
background-color: #f0f0ee;
float: left;
width: 50%;
min-height: 100%;
}
#logoLeft {
float: right;
margin-top: 2.5em;
}
I'd suggest:
#left:hover #logoLeft {
opacity: 0.4;
}
If you'd like a gradual fading:
#logoLeft {
opacity: 1;
transition: opacity 0.3s ease-in-out;
}
#left:hover #logoLeft {
opacity: 0.4;
transition: opacity 0.3s ease-in-out;
}
The below code would work if image.jpg is the regular image and faded.jpg contains a faded version of image.jpg that you photoshop.
<img src='image.jpg' onmouseover="this.src='faded.jpg';" onmouseout="this.src='image.jpg';">
You can do this one of two ways.
Use the general child selector: #left:hover #logoLeft which just says anything that is a child of #left:hover with an id of #left should have these rules applied.
User the direct descendant selector #left:hover > #logoLeft which says that any immediate child of #left:hover with id #left should have these rules applied.
Here is a more detailed description from Mozilla: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors
Also, the :hover sudo selector is what you would use for the mouse over property. MDN article: https://developer.mozilla.org/en-US/docs/Web/CSS/:hover
NOTE: Some older (outdated) versions of Internet Explorer only support the :hover sudo selector on anchor tags.
For the fading I'm guessing you just want to change the opacity of the image. To have full cross browser support I would recommend this page: http://css-tricks.com/snippets/css/cross-browser-opacity/
Which says the following:
.transparent_class {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */
filter: alpha(opacity=50);
/* Netscape */
-moz-opacity: 0.5;
/* Safari 1.x */
-khtml-opacity: 0.5;
/* Good browsers */
opacity: 0.5;
}
Here is a working jsfiddle
Here is the Jquery Solution of this :
Css Part :
#left{
background-color: #f0f0ee;
float: left;
border:1px solid black;
width: 50%;
min-height: 100%;
}
#logoLeft {
float:right;
}
.fadeOut{
opacity:0;
transition: opacity 1s ease-in-out;
}
Js Part :
<script type="text/javascript">
$(document).ready(function(){
$("#left").on({
"mouseover" : function() {
$("#logoLeft").addClass("fadeOut");
},
"mouseout" : function() {
$("#logoLeft").removeClass("fadeOut");
}
});
});
</script>
HtML part:
<div id="left">
<img id="logoLeft" src="http://i.imgur.com/CJ7el5l.png" />
</div>
Here is the working example : http://jsbin.com/tijobudo/1/edit
I have a asp.net solution that uses ajax. One of the features using update progress panel is that the contents are only revealed when an ajax request is going on in the background.
So I want to basically show a black transparent background which stops the user from doing anything, and also display a box in the center of the screen that says please wait, and has a loading gif.
I was able to get the black background using this:
<asp:UpdateProgress ID="AjaxAnimation" runat="server">
<ProgressTemplate>
<center>
<%-- <asp:Image ID="loadingImage" runat="server" src="/_layouts/images/PDFLibrary/ajax-loader.gif"/> --%>
<div class="dim"></div>
</center>
</ProgressTemplate>
</asp:UpdateProgress>
Css
.dim
{
height:100%;
width:100%;
position:fixed;
left:0;
top:0;
z-index:100 !important;
background-color:black;
filter: alpha(opacity=75); /* internet explorer */
-khtml-opacity: 0.75; /* khtml, old safari */
-moz-opacity: 0.75; /* mozilla, netscape */
opacity: 0.75; /* fx, safari, opera */
}
But how can I have a box in the center of the screen?
Something as following?:
<div class="dim" runat="server">
<span class="msg">Please wait...</span>
</div>
.dim
{
height:100%;
width:100%;
position:fixed;
left:0;
top:0;
z-index:100 !important;
background-color:black;
filter: alpha(opacity=75); /* internet explorer */
-khtml-opacity: 0.75; /* khtml, old safari */
-moz-opacity: 0.75; /* mozilla, netscape */
opacity: 0.75; /* fx, safari, opera */
}
.dim .msg {
display:inline-block;
position: absolute;
width: 200px
height: 100px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
You need to use position:absolute and negative margin.
position: absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
width:200px;
height:200px;
Please have a look my code here
I am trying to hide a progress bar after a certain amount of seconds and show a div.
I have coded this jsFiddle but does not seem to be working.
jsFiddle
you can do this easly in css
.blue{
width: 200px;
background-color: blue;
height:30px;
left:40px;
top:30px;
padding:5px;
}
.blue>div{
background-color:red;
height:25px;
width:50px;
top:10px;
}
<div class="blue" ><div>20%</div></div>
You need browser prefixes:
#keyframes bubbly
{...}
#-moz-keyframes bubbly /* Firefox */
{...}
#-webkit-keyframes bubbly /* Safari and Chrome */
{...}mymove
#-o-keyframes bubbly /* Opera */
{...}
So it works in almost all browsers.