I use some pretty straightforward css to show a larger image on hover. This is the HTML structure:
<div class="Enlarge">
<img src="small.jpg" />
<span><img src="large.jpg" /></span>
</div>
And here's the CSS:
.Enlarge {
position:relative;
}
.Enlarge span {
position:absolute;
left: -9999px;
}
.Enlarge span img {
margin-bottom:5px;
}
div.Enlarge:hover{
z-index: 999;
cursor:pointer;
}
div.Enlarge:hover span{
top: 110px;
left: 0px;
z-index: 999;
width:500px;
height:300px;
padding: 10px;
background:#eae9d4;
-webkit-box-shadow: 0 0 20px rgba(0,0,0, .75));
-moz-box-shadow: 0 0 20px rgba(0,0,0, .75);
box-shadow: 0 0 20px rgba(0,0,0, .75);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius:8px;
font-family: 'Droid Sans', sans-serif;
font-size:12px;
line-height:18px;
text-align: center;
color: #495a62;
padding-bottom:20px;
}
However, I would like to add an ease in/out effect to the larger image. I couldn't work that out. If I apply the transition to the , the image will slide in from the left side. This is not what I want. If I apply the effect to the image, it won't work.
Here's the example: Example
Thanks in advance for your input!
Using visibility and opacity you can achieve a fade effect.
JSFiddle Demo
Add these styles:
.Enlarge span {
position:absolute;
left: -9999px;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
-ms-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
}
div.Enlarge:hover span {
visibility: visible;
opacity: 1;
/* rest of your styles below */
Related
I have a picture that when you hover over it, a fading caption would appear
Here is the jfiddle
https://jsfiddle.net/e9dwbdyn/4/
I want it to look like this however:
I think it has to do with this part but I'm not sure how to exactly format it. Any advice/help would be appreciated. Thanks!
figcaption {
position: absolute;
top:35%;
width: 80%;
height:50%;
left:10%;
font-size: 14px;
color: white;
background-color: #9F8F53;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
}
Try this one https://jsfiddle.net/e9dwbdyn/6/
figure {
position: relative;
display: block;
margin: 5px 0 10px 0;
width:350px;
}
figcaption {
position: absolute;
top:30%;
width: 80%;
height:40%;
left:10%;
font-size: 20px;
font-family: "Arial, Helvetica, sans-serif";
text-align: center;
color: white;
background-color: #000;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
}
figure:hover figcaption {
opacity: 0.5;
}
.product-name a {
color: #fff;
}
.product-name a:hover {
color: #fff
}
.product-name, .desc_grid, .price {
padding: 0px;
margin: 0px;
}
}
You would still need to play around with some margins, text fonts and sizes to get the exact match.
you may use figcaption as flex container
https://jsfiddle.net/e9dwbdyn/5/
figure {
position: relative;
display: block;
margin: 5px 0 10px 0;
width:350px;
}
figcaption {
position: absolute;
top:0;
left:0;
bottom:0;
right:0;
display:flex;
font-size: 14px;
color: white;
}
figcaption>div {
background-color: #9F8F53;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
margin:auto;
text-align:center;
width:80%;
}
figure:hover figcaption div {
opacity: 0.7;
}
.product-name
<figure>
<img src="https://goodnessofgodministries.files.wordpress.com/2012/03/bugia_candlestick_.jpg" alt="Candlesticks" style="width:350px" />
</a>
<figcaption>
<div class="product-shop">
<h3 class="product-name">Candlesticks<span class="over"></span></h3>
<p class="desc_grid">lorem ipsum</p>
<div class="price-box">
<span class="regular-price" id="product-price-3-new">
<span class="price">$50.00</span></span>
</div>
</div>
</figcaption>
</figure>
When positioning elements absolutely it is always a good idea to incorporate a bit of flexibility. The issue with your code, is that you try to vertically center the element by estimating the top and left value in percentages, which isn't that flexible: What if the images inside the figure element have different sizes and aspect ratios? If so, these estimated percentages will not work in every instance and would potentially require you to manually change the value with each image.
In the example you present, it looks as if the height of the transitioned element is determined by its own content, rather than having set a specific height as in your code.
Example 1 (height determined by the content inside) works with browsers from IE9 and up:
figcaption {
position: absolute;
top: 50%; /* Always 50% from the top */
transform: translateY(-50%); /* Extracting half of the content height to vertically center */
width: 80%;
left: 0;
right: 0;
opacity: 0;
margin: 0 auto;
font-size: 14px;
padding: 1em;
color: white;
background: rgba(194, 145, 57, 0.7); /* Use semitransparent background instead of opacity for readability reasons */
transition: opacity .5s;
}
figure:hover figcaption {
opacity: 1;
}
Example 2 (fixed height) should work in all browsers:
figcaption {
position: absolute;
height: 50%; /* Fixed height */
width: 80%;
top: 0; /* Filling the whole space with top, left, bottom, right */
left: 0;
right: 0;
bottom: 0;
opacity: 0;
margin: auto; /* Using margin: auto; the space around is distributed evenly */
font-size: 14px;
padding: 1em;
color: white;
background: rgba(194, 145, 57, 0.7);
transition: opacity .5s;
}
In the not-too-distant future Flexbox has to be the preferred method, as it does all the calculations for you.
I been headache about the Bootstrap thumbnail add in CSS hover effect.
Currently I got it correctly while view from desktop. But it still not hover correctly while view in mobile devices. can kindly give me some solution?
the sample hover i use is from the link below
http://tympanus.net/Tutorials/OriginalHoverEffects/index.html
But i just realize that this hover effect is not working in mobile devices.
Kindly provide any solution that is more effective?
Below is the code for HTML and CSS. Please kindly have a look. Thanks.
below is HTML
<div class="container">
<div class="row">
<div class="col-md-4 thumbnail view view-first">
<img src="img/apple.jpg" alt="apple">
<div class="mask">
<p>.col-md-4</p>
</div>
<h4>.col-md-4</h4>
</div>
</div>
</div>
below is CSS Hover Effect and CSS Anime code
/* Overwrite custom bootstrap thumbnail */
.thumbnail {
border-top-left-radius: 40px !important;
border-top-right-radius: 0px !important;
border-bottom-left-radius: 0px !important;
border-bottom-right-radius: 40px !important;
background-color: transparent !important;
border: 0px !important;
}
.thumbnail > img,
.thumbnail a > img {
border-top-left-radius: 40px !important;
border-top-right-radius: 0px !important;
border-bottom-left-radius: 0px !important;
border-bottom-right-radius: 40px !important;
margin-bottom: 15px;
}
/* hover effect*/
.view {
overflow: hidden;
position: relative;
text-align: center;
}
#media {
.view .mask,.view .content {
width: 312px;
height: 234px;
position: absolute;
overflow: hidden;
top: 0;
margin-top: 4px;
border-top-left-radius: 38px;
border-bottom-right-radius: 38px;
}
}
/* Media Queries */
#media screen and (min-width:320px) and (max-width:540px) {
.view .mask,.view .content {
margin-top: 44px;
width: 152px;
height: 114px;
border-top-left-radius: 38px;
border-bottom-right-radius: 38px;
}
}
.view img {
display: block;
position: relative;
}
/* Hover Effect anime */
.view-first img {
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-first .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
background-color: rgba(124,81,161, 0.7);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.view-first:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
I am not a professional but as i am aware there is no such thing as hover thing on mobile?
The closest and yet maybe the best thing in my opinion is to make a hover effect for desktop version and "onclick" effect for mobile version.
I am pointing again for hover you must have mouse to hover over it if you get the idea?
Hope it helps.
I'm trying to make a menu with definitions on the left and links on the right - but I can't get all the box to be a link. I could solve it with table I guess, but I hope there is a smoother solution.
So I want to float left one side of the line and right the other.
Here's my CSS:
li {
margin: 0px 10px 0px 100px;
padding: 30px 5px 0px 5px;
border-bottom: 2px solid black;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
display: block;
-moz-transition: background-color .3s ease-in;
-webkit-transition: background-color .3s ease-in;
-o-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
li:hover {
background-color: #CCC;
-moz-transition: background-color 0.01s;
-webkit-transition: background-color 0.01s;
-o-transition: background-color 0.01s;
transition: background-color 0.01s;
}
a {
float: right;
color: black;
text-decoration: none;
}
And the HTML:
<ul>
<li>Blog#.blogspot.com</li>
<li>Twitter##</li>
<li>Google+Google+</li>
<li>Contact me##gmail.com</li>
</ul>
Or much better, here: http://jsfiddle.net/hJRdN/
It is done here on jsfiddle
just replace html and css as in js fiddle
<ul>
<li>Blog<span>#.blogspot.com</span></li>
<li><span>Twitter</span>##</li>
<li>Google+<span>Google+</span></li>
<li>Contact me<span>##gmail.com</span></li>
</ul>
CSS
li {
float:left;
width:400px;
margin: 0px 10px 0px 100px;
border-bottom: 2px solid black;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
display: block;
-moz-transition: background-color .3s ease-in;
-webkit-transition: background-color .3s ease-in;
-o-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
li:hover {
background-color: #CCC;
-moz-transition: background-color 0.01s;
-webkit-transition: background-color 0.01s;
-o-transition: background-color 0.01s;
transition: background-color 0.01s;
}
a {
display:block;
padding: 30px 5px 0px 5px;
color: black;
text-decoration: none;
width:390px;
}
a span{ float:right}
Is it necesary to have unordered list? If not you could easily achieve that with just using floated divs.
<a href="#">
<div class="row">
<div class="left">blog</div><div class="right">blogspot.com</div>
</div>
</a>
<a href="#">
<div class="row">
<div class="left">twitter</div><div class="right">twitter.com</div>
</div>
</a>
And css:
.row { width: 100%; float: left; }
.row:hover { background-color: #e3e3e3; }
.left { float: left; }
.right { float: right; }
.row .left { color: #000; }
.row .right { color: #000; }
Check out this fiddle: http://jsfiddle.net/dejvidpi/7a6mp/
I'm currently attempting to have a with an image fade in when I hover over some text using CSS. I've applied the CSS code, but the effect doesn't show; the div appears, but without the fade-in.
Also, I realize that CSS transitions don't really work with IE. If anyone could point me in the right direction of a workaround for that, it would be much appreciated. (:
CSS:
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: relative;
display: none;
color: black;
text-decoration: none;
opacity:0.0;
filter:alpha(opacity=0);
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 5px;
left: -1000px;
border: 1px solid gray;
background-color: #fff;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
position: relative;
display: inline;
top: -290px;
left: -25px;
opacity:1.0;
filter:alpha(opacity=100);/*position where
enlarged image should offset horizontally */
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#networking {
width: 200px;
height: 140px;
margin-left: 360px;
top: 115px;
position: absolute;
background-color: #613286;
opacity:1.0;
filter:alpha(opacity=100);
color: #ffffff;
text-align:center;
border-radius: 20px;
-webkit-transform: rotate(14deg);
-moz-transform: rotate(14deg);
-ms-transform: rotate(14deg);
-o-transform: rotate(14deg);
transform: rotate(14deg);
}
HTML:
<div id="networking">
<a class="thumbnail" href="1.5.2experientialstudios.html#down4"><h4>Networking Lounge</h4>
<span><img src="images/net3.jpg" width="250" /></span></a>
</div>
Thank you!
Try with removing your display rule:
.thumbnail span{ /*CSS for enlarged image*/
position: relative;
/*display: none; remove this */
color: black;
text-decoration: none;
opacity:0.0;
filter:alpha(opacity=0);
}
As you have opacity 0 you won't need display:none and you can't make a transition between not displayed at all to inlined as they are different types.
And modify this rule:
.thumbnail:hover span { /*CSS for enlarged image on hover*/
top: 0px; /* adjust as needed */
left: -25px;
opacity:1.0;
filter:alpha(opacity=100);/*position where
enlarged image should offset horizontally */
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
(the hover and then span can make it a bit jumpy).
I also added a ms prefixed version to transitions. It is apparently not useful in this context.
For IE9 and below you can use jQuery to fade in an element (or simply use vanilla JavaScript to modify the opacity in a setTimeout loop).
Fiddle here:
http://jsfiddle.net/AbdiasSoftware/9rCQv/
Is this what you're after?
Hello I was wondering whether this is possible. I have a horizontal menu created using CSS with submenus and it works just fine. However, I want to have submenus appear to the right of the submenus already appearing.
The menu is as such: http://jsfiddle.net/dvpKx/39/
And the code is:
/*First reset ul styles*/
.nav,
.nav ul,
.nav li,
.nav a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
/*Now add fixed width & height to the menu along with rounded corners and gradients*/
.nav {
height: 50px;
width: inherit;
margin: 10px;
background: -webkit-linear-gradient(top, rgb(198,56,32) 0%, rgb(127,48,35) 100%);
background: -moz-linear-gradient(top, rgba(198,56,32,1) 0%, rgb(127,48,35) 100%);
background: -o-linear-gradient(top, rgb(198,56,32) 0%, rgb(127,48,35) 100%);
background: -ms-linear-gradient(top, rgb(198,56,32) 0%, rgb(127,48,35) 100%);
background: linear-gradient(top, rgb(198,56,32) 0%, rgb(127,48,35) 100%);
-webkit-border-radius: 15px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/*Float links left to align links horizontally & position relative to align submenus properly*/
.nav li {
position: relative;
list-style: none;
float: left;
display: block;
height: 50px;
}
/*
Styling menu links -
font, color, padding, etc. Then a dark text shadow and a color transition to create a smooth effect when the color changes on hover state. To create the links separator add a border to the left and right and then we will remove the left border from the first link and the right border from the last link. For the hover state we will only change the text color.
*/
.nav li a {
border-bottom: none;
background: none;
display: block;
padding: 0 14px;
margin: 6px 0;
line-height: 32px;
text-decoration: none;
border-left: 1px solid #393942;
border-right: 1px solid #4f5058;
font-family: Verdana, sans-serif;
font-weight: bold;
font-size: 14px;
color: #f3f3f3;
text-shadow: 2px 3px 0px rgba(0,0,0,0.6);
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
.nav li:first-child a { border-left: none; }
.nav li:last-child a{ border-right: none; }
.nav li:hover > a {
color: rgb(114,163,45);
background: none;
font-size: 18px;
}
/*
SUB MENU 1
We will start to position the sub menu 50px from the top and 0px from the left of the menu item and add bottom rounded corners. We will set the opacity to 0 and on hover state to 1 to create the fade in/out effect. For the slide down/up effect we need to set the list height to 0px when is hidden and to 36px on hover state.
*/
.nav ul {
position:absolute;
top: 50px;
padding-left: 0px;
opacity: 1;
background: rgb(43,35,34);
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
.nav li:hover > ul { opacity: 1; }
/* Hiding submenu 1 */
.nav ul li {
height: 0;
overflow: hidden;
padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
/* When hovered over, show submenu 1 */
.nav li:hover > ul li {
height: 46px;
overflow: hidden;
padding: 0;
z-index: 8999;
}
/* Hiding submenu TWO */
.nav ul ul li {
height: 0;
overflow: hidden;
padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
/* When hovered over, show submenu 1 */
.nav li:hover > ul ul li {
height: 80px;
padding: 0;
z-index: 9000;
}
/* Setting width of submenu to 100px & add a bottom border instead of left and right ones
(also removing it from last link) */
.nav ul li a {
width: 250px;
padding: 4px 0 4px 40px;
margin: 0;
border: none;
border-bottom: 1px solid #343438;
}
.nav ul li:last-child a { border: none; }
I would recommend the Son of Suckerfish dropdown (a CSS solution).
Code: http://www.htmldog.com/articles/suckerfish/dropdowns/ (specifically the Multi-level dropdown section about 1/2 down). Also, links to examples are shown at the bottom of the page.
You can try this
.menus {
width:100px;
height:50px;
border: 5px solid #000000;
border-radius: 25px;
text-align: center;
line-height: 50px;
color: black;
background-color: #dcdcdd;
}
.submenus {
margin-top:10px;
display:none;
width:100px;
height:50px;
border: 5px solid #000000;
border-radius: 25px;
text-align: center;
line-height: 50px;
color: black;
}
#menu1outer:hover #submenus1 {
display: block;
}
Hope that helps and you can see the sample here:
reformas integrales madrid