Not sure what's going on but I suspect jquery is at work... I am using an image sprite on hover, but the image slides in from the right as opposed to appear in place. See the blue bubble turn into a red bubble at http://www.maidinhoboken.com/testpage/
How do I get it to appear in place?
HTML:
<span class="displace">Test</span>
CSS:
a.rollover {
display: block;
width: 190px;
height: 190px;
text-decoration: none;
background: url(images/bubble_rollover1.png);
}
a.rollover:hover {
background-position: -190px 0;
}
.displace {
position: absolute;
left: -5000px;
}
Add this to your CSS file on line 1666
a.rollover, a.rollover:hover {
transition: none;
-moz-transition: none;
-webkit-transition: none;
-o-transition: none;
-ms-transition: none;
}
You have a transition set somewhere in your style sheet that is being inherited.
You have CSS transition which makes the image roll instead of appear. Put transition:none rule into a.rollover:
a.rollover {
display: block;
width: 190px;
height: 190px;
text-decoration: none;
background: url(images/bubble_rollover1.png);
/* add this */
transition: none;
-moz-transition: none; /* Firefox 4 */
-webkit-transition: none; /* Safari and Chrome */
-o-transition: none; /* Opera */
}
You have transitions set on the links here
a, a:visited {
color: #3FB6D7;
text-decoration: none;
transition: all 0.2s ease-in-out 0s;
}
remove it and it should be fine
Related
Good Day, I'm trying to create a slidedown menu using some JS and CSS but it's not working. Here's the fiddle link:
ul.show-child{
height: auto;
display: block;
-webkit-transition: height 1s ease;
-moz-transition: ease-in 2s none;
-ms-transition: ease-in 2s none;
-o-transition: ease-in 2s none;
transition: ease-in 2s none;
}
https://jsfiddle.net/gkrja9jy/
What I want to do, is to add some cool animation when I show the hidden div. By the way, I just copied the transition effect from this site
There is a pure CSS solution. I corrected your example. Make sure that you write correct HTML code. Here is the new code and a fiddle:
HTML code:
<ul class="custom-sidebar">
<li>
Accountancy
</li>
<li>
Grade School
<ul>
<li>Goals and Objectives</li>
<li>Clubs and Orgs</li>
<li>Photo Gallery</li>
<li>Summer Tutorial</li>
</ul>
</li>
</ul>
CSS code:
li ul {
display: block;
height: 0px;
overflow: hidden;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
li:hover ul {
height: 100px;
display: block;
}
.custom-sidebar a,.custom-sidebar a:visited {
color: #0f5882;
display: block;
font-weight: bold;
height: 25px;
margin-left: -23px;
padding-left: 23px;
vertical-align: middle;
width: 100% !important;
}
.custom-sidebar li {
list-style: outside none none;
padding-left: 17px;
}
.custom-sidebar li a {
background-color: #ebecec;
border-left: 6px solid #116b9e;
padding-top: 2px;
margin-bottom: 8px;
}
https://jsfiddle.net/u6yrL0a0/2/
It is usually best to avoid JavaScript if it is not needed.
yo can use jquery to create the animation like this:
var jq=jQuery.noConflict();
jq(document).ready(function(){
jq('.menu-div').hover(function(){
if(jq(this).children(":first").hasClass('has-child')){
var thisx = jq(this).children(":first");
thisx.next('ul').slideDown(1000);
}
});
});
jq(document).ready(function(){
jq('.menu-div').mouseleave(function(){
if(jq(this).children(":first").hasClass('has-child')){
var thisx = jq(this).children(":first");
thisx.next('ul').slideUp(1000);
}
});
});
and the css will be like this :
ul.hide-child{
display: none;
overflow: hidden;
}
ul li ul{
-webkit-transition: all 1s;
-moz-transition: all 1s ;
transition: all 1s;
display:none;
height:auto;
}
.custom-sidebar .post-link,.post-link:visited{
color: #0f5882;
display: block;
font-weight: bold;
height: 25px;
margin-left: 0px;
padding-left: 23px;
vertical-align: middle;
width: 100% !important;
}
.custom-sidebar li{
background-color: #ebecec;
border-left: 6px solid #116b9e;
list-style: outside none none;
margin-bottom: 0px;
padding-left: 17px;
padding-top: 2px;
}
https://jsfiddle.net/gkrja9jy/5/
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 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?
Im having a problem inside of Chrome only, tested this inside of Opera, FF, Safari and it all works fine.
I know there was a bug with Chrome 17 with transitions on visited links so I even included that thought to be fix
There is still not animation for the transition on hover for border-bottom.
any clues? am I just not seeing something? I've read around and it all seems to be talking about the color of the text, while i'm trying to transition in the border-color.
I tried to animate in border-bottom from none to 1px solid #9ecd41 but found that in all browsers except firefox had a funky jagged animation where it kinda bounced.
any help would be awesome, attached is the code i'm working with.
Ok here is my html
<nav>
<ul class="nav">
<li>ABOUT</li>
<li>SERVICES</li>
<li>MEDIA</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</nav>
And here is my CSS
nav {
float: right;
height: auto;
width: auto;
padding: 25px;
}
ul.nav {
width: auto;
height: auto;
overflow: visible;
}
.nav > li {
display: inline-block;
margin-right: 20px;
}
.nav > li:last-child {
margin-right: 5px;
}
/* non-visited links: Chrome transition bug fix */
.nav > li > a:visited {
color: #ffffff;
letter-spacing: 1px;
text-decoration: none;
display: block;
font-family: "proxima-nova-condensed",sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
font-smooth: always;
-webkit-font-smoothing: antialiased;
padding-bottom: 5px;
border-bottom: 1px solid #333; /* CSS3 transition */
-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
-ms-transition: all .5s ease-in;
transition: all .2s ease-in;
}
/* visited links: Chrome transition bug fix */
.nav > li > a {
color: #ffffff;
letter-spacing: 1px;
text-decoration: none;
display: block;
font-family: "proxima-nova-condensed",sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
font-smooth: always;
-webkit-font-smoothing: antialiased;
padding-bottom: 5px;
border-bottom: 1px solid #333; /* CSS3 transition */
-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
-ms-transition: all .5s ease-in;
transition: all .2s ease-in;
}
.nav > li > a:hover {
border-bottom: 1px solid #9ecd41;
}
.nav > li > a:active {
border-bottom: 1px solid #f96d10;
}
Just styled the <li> the way I would of styled the li with widths/heights/padding/border etc and then just styled the link to fill the li and just styled the links colour and font properties. Chrome has small bug on border-bottom for link transitions
This aught to be an easy fix.
As far as I can see your problem lies by where you put the transition in.
With chrome it needs to be added to the at most parent.
Try adding it here:
.nav > li {
display: inline-block;
margin-right: 20px;
}
Also add the declaration for the -webkit- elements
for ex.
.nav > li {
display: inline-block;
margin-right: 20px;
-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
-ms-transition: all .5s ease-in;
transition: all .2s ease-in;
-webkit-transition-property: all;
-webkit-transition-duration: .5s;
-webkit-transition-timing-function: ease-in;
}
See if this works and if not I'll try to build something similar and work on a solution.
I had this problem with Bootstrap 4 navbar component. My menu links had border-bottom and starting from the second one, all were invisible during menu opening on mobile.
Fixed it with transform: rotate(0); on the element with the border-bottom.