I've seen this effect in so many modal galleries these days that when the browser is resized the image smoothly animates to centre and not just in a jerk.
Now I've made a fiddle to add an image to centre and also added a css transition but somehow it still jerks after browser resizing.
please tell me where I am doing this wrong.
thanks.
here is the fiddle
Fiddle
.fullImages {
margin: auto;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 133;
border: 3px solid black;
max-height: 78%;
-webkit-box-shadow: 0 2px 10px rgba(0,0,0,.5);
-moz-box-shadow: 0 2px 10px rgba(0,0,0,.5);
box-shadow: 0 2px 10px rgba(0,0,0,.5);
margin-top: 33px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.55s ease;
}
Here is an example click on any image and resize the browser to see the modal image animate to center.
Lightbox Example
Related
Today I updated Firefox to version 45 (current). After that I started to have problems with scaling thumbnails located in div with overflow: hidden. On mouseover the thumbnail for a millisecond scaling down and after this doing correct action . When you hover mouse the thumbnail second time, everything is working properly. The problem returns after clearing the browser cache or a long time without mouse over the thumbnail. The funny thing is that on other browsers working properly(Chrome, Opera).
[CSS]
.galleryimg {
height: 200px;
width: 200px;
overflow: hidden;
-webkit-transition: -webkit-transform .15s linear;
-moz-transition: -moz-transform .15 linear;
-webkit-box-shadow:
0 3px 6px rgba(0,0,0,.25),
0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow:
0 3px 6px rgba(0,0,0,.25),
0 3px 6px rgba(0,0,0,.5);
box-shadow:
0 3px 6px rgba(0,0,0,.25),
0 3px 6px rgba(0,0,0,.5);
}
.thumbnail {
width: 200px;
height: 200px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
cursor: pointer;
}
.thumbnail:hover {
position: relative;
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
transform: scale(1.1);
}
[HTML]
<div class="galleryimg">
<a href="#">
<img class="thumbnail" src="http://theactivephotographer.com/wp-content/uploads/2012/07/TAP_Ad_300x300.jpg" />
</a>
</div>
JSFiddle
I am working on a project for college and I am having trouble making a div change opacity from 0 to .9 when the user hovers over the div. I was wondering does the z-index affects how the hover works. I have tried the code in J Query and by using the CSS transition property and still receive the same results. NOTHING HAPPENS. Here is the code I used in CSS and HTML.
<div class="special">
<div class="spImage">
<div>
<article>Lil Wayne</article>
</div>
<img id="special1" src="image/2pc.jpg" />
<p>2pc<br>Dark<br>$1.30</p>
</div>
</div>
.spImage{
border: 2px solid grey;
background-color: black;
position: relative;
z-index: -1;
}
.spImage div{
background-color: orange;
position: absolute;
opacity: 0;
width: 250px;
height: 330px;
z-index: 0;
box-shadow: 0px 0px 5px 10px orange;
border-radius: 5px;
-o-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.spImage div:hover{
opacity: .8;
}
My overall goal is to make the div appear over the div with a class of spImage. Any help is greatly appreciated, Thanks.
z-index determines an elements stacking order, in your example, you don't necessarily need to be using z-index at all since your HTML elements are already correctly positioned for what you are trying to do.
See the below example without the z-index property - if I understand your question correctly, this should be the expected behaviour:
.spImage{
border: 2px solid grey;
background-color: black;
position: relative;
}
.spImage div{
background-color: orange;
position: absolute;
opacity: 0;
width: 250px;
height: 330px;
box-shadow: 0px 0px 5px 10px orange;
border-radius: 5px;
-o-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.spImage div:hover{
opacity: .8;
}
<div class="special">
<div class="spImage">
<div>
<article>Lil Wayne</article>
</div>
<img id="special1" src="https://i.imgur.com/Ik7I6l7b.jpg" />
<p>2pc<br>Dark<br>$1.30</p>
</div>
</div>
I have an ASP.net website where I have the following...
HTML:
<div style="width: 99%; margin: 0; padding: 0; text-align: left; overflow: hidden;">
<div id="sample3" lang="is" class="sample3">
<figure>
<img src="../theImages/imgPra.png" width="160" height="160" alt="Specialty Profile" />
<figcaption>Specialty Profile</figcaption>
</figure>
<!--end sample3--></div>
</div>
CSS:
.sample3 figure {
width: 200px;
height: 200px;
overflow: hidden;
position: relative;
background: url('../theImages/preview4.jpg') fixed no-repeat;
}
.sample3 figcaption {
position: absolute;
display: block;
width: 350px;
height: 50px;
left: 110px;
bottom: -110px;
text-align: center;
color: #fff;
background-color: rgba(26,54,59,0.8);
border: 3px solid rgba(62,116,126,0.6);
line-height: 50px;
-moz-box-shadow: rgba(0,0,0,.5) 0 2px 8px;
-webkit-box-shadow: rgba(0,0,0,.5) 0 2px 8px;
box-shadow: rgba(0,0,0,.5) 0 2px 8px;
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
-moz-transition: bottom .5s ease-out, left .5s ease-out;
-webkit-transition: bottom .5s ease-out, left .5s ease-out;
-o-transition: bottom .5s ease-out, left .5s ease-out;
transition: bottom .5s ease-out, left .5s ease-out;
}
.sample3 figure:hover figcaption {
left: -20px;
bottom: 20px;
}
JSFiddle: http://jsfiddle.net/vas1watw/
It works fine in a regular webpage, but when I add it to my .net website, the ribbon is displayed without the animation.
How can I resolve the issue.
debug mode:
are you using sitemaster.if you using it place css on sitemaster
Take a look at the ClientIDMode property of the #Page directive. ASP.NET tends to auto adjust the client generated ids, which causes your CSS to nome handle #sample3 selector since this Id will not exists in the HTML, unless that property is set to Static. Read more about ClientIDMode on MSDN.
All the code (HTML/CSS) were placed correctly in my site. IE just took a full day to refresh the page. I had to reset the IIS site which forced a refresh and it worked afterward.
I have something like this "http://jsfiddle.net/sogpgepg/" that works on Chrome and on Firefox. However I noticed the offset doesn't work on Internet Explorer and the outline is outside the picture and not inside it.
After some research I found out that Explorer doesn't support outline-offset!
Is there any way I can get the same effect (inside border) on Internet Explorer?
Script:
HTML
<div id="container">
<div class="inner">
<img src="http://hostingride.com/wp-content/uploads/2014/07/microsoft_xp_bliss_desktop_image-650x0.jpg"/>
</div>
</div>
CSS
#container{
width: 300px;
height: auto;
margin: 0;
padding: 0;
}
.inner img{
width: 100%;
outline: 6px solid RGBa(255,0,0, 0.5);
outline-offset: -6px;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
.inner img:hover {
outline: 6px solid rgba(200,200,200,0);
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
Here is an alternate for IE as shown in "http://css-tricks.com/"
Code:
<div class="inner-border">
Transparent Inside Border
</div>
CSS
.inner-border {
background: #000;
color: #fff;
margin: 50px;
padding: 15px;
position: relative;
}
.inner-border:before {
border: 5px solid #000;
content: "";
position: absolute;
top: -10px;
bottom: -10px;
left: -10px;
right: -10px;
}
JSFiddle Demo of the Above Code
Here is another example of Transparent Inside Border:
http://jsfiddle.net/chriscoyier/DvaqK/4/
Hope this will help!
One possible work around is to use an inset shadow.
I modified your fiddle somewhat.
http://jsfiddle.net/sogpgepg/1/
The changes I made are:
Make the <img> a background-image on .inner.
Move all styles from .inner img up to .inner
By setting the blur radius to 0 and specifying the spread radius, you can get a hard-edge 'border'.
This link includes more information on using shadows (particularly inset shadows): http://designshack.net/articles/css/inner-shadows-in-css-images-text-and-beyond/
Code:
#container {
width: 300px;
height: auto;
margin: 0;
padding: 0;
}
.inner{
width: 300px;
height:200px;
background-image:url('http://hostingride.com/wp-content/uploads/2014/07/microsoft_xp_bliss_desktop_image-650x0.jpg');
box-shadow:inset 0px 0px 0px 6px rgba(255,0,0,0.5);
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
.inner:hover {
box-shadow: inset 0px 0px 0px 6px rgba(200,200,200,0);
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
I'm trying to make a simple square rotate slightly to the left when the user hovers over the element. I am rotating the element about the Y axis. When I hover over the element it looks like the left half of the element is correctly raising the hover. When you attempt to hover the right side is quirky. I know it's definitely related to something within my transform. Hoping someone with more experience will be able to spot it.
Update:
I found a similar question here, but don't know what they mean in the answer. If I remove the height/width from the container element it works. But why?
:hover works only on lower part of rotateX transformed div
HTML:
<div class='container'>
<div class='tile'>
Tile
</div>
</div>
CSS:
.tile
{
border: 1px solid black;
width: 100px;
height: 100px;
box-shadow: 2px 2px 5px #888888;
border-radius: 12px;
-moz-transition: all .5s linear;
-o-transition: all .5s linear;
-webkit-transition: all .5s linear;
transition: all .5s linear;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
position: absolute;
}
.tile:hover
{
-webkit-transform: rotateY(25deg);
transform: rotateY(25deg);
box-shadow: 10px 10px 5px #888888;
}
.container
{
position: relative;
margin: 10px auto;
width: 450px;
height: 281px;
}
http://codepen.io/cgatian/pen/lDejJ?editors=110
Change the hover from the .title to the .container. As the .title moves, the hover area change shape/location and causes the hover out.
http://jsbin.com/ripicesu/1/edit
CSS
.tile
{
border: 1px solid black;
width: 100px;
height: 100px;
box-shadow: 2px 2px 5px #888888;
border-radius: 12px;
-moz-transition: all .5s linear;
-o-transition: all .5s linear;
-webkit-transition: all .5s linear;
transition: all .5s linear;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
position: absolute;
}
li:hover .tile
{
-webkit-transform: rotateY(25deg);
transform: rotateY(25deg);
box-shadow: 10px 10px 5px #888888;
}
.container
{
position: relative;
margin: 10px auto;
width: 100px;
height: 100px;
}
li {
list-style-type: none;
display: block;
width: 100px;
height: 100px;
}
HTML
<div class='container'>
<ul>
<li><div class='tile'>Tile</div></li>
<li><div class='tile'>Tile</div></li>
<li><div class='tile'>Tile</div></li>
<li><div class='tile'>Tile</div></li>
</ul>
</div>
You can remove container, than it's working. Change .tile position to relative and float:left and you can have as many as you like.
CSS
.tile
{
position: relative;
float: left;
text-align: center;
line-height: 100px;
border: 1px solid black;
width: 100px;
height: 100px;
box-shadow: 2px 2px 5px #888888;
border-radius: 12px;
-moz-transition: all .5s linear;
-o-transition: all .5s linear;
-webkit-transition: all .5s linear;
transition: all .5s linear;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}