Here's my HTML:
<div id="flexi-overlay">
<a id="flexi-overlay-image-link-container" href="#" class="popup image-link"?>
<img src="image.jpg" />
</a>
<span id="flexi-overlay-text-container">
<a href="#">
<span class="flexi-link" id="title-1">Modern Duets</span>
<span class="flexi-link" id="title-2"><em>Flexi Compilation</em></span>
<span class="flexi-link" id="title-3"><strong>**New**</strong></span>
</a>
</span>
</div>
I want to lower the opacity of the image in the link on top when the link on the bottom of the page is hovered over. I tried doing the following, but it hasn't worked.
#flexi-overlay-text-container + #flexi-overlay-image-link-container {
filter: alpha(opacity=60);
opacity:.6;
}
You can make flexi-overlay-image-link-container the child of flexi-overlay-text-container and change css like:
#flexi-overlay-text-container:hover>#flexi-overlay-image-link-container {
filter: alpha(opacity=60);
opacity:.6;
}
#flexi-overlay-image-link-container:hover {
filter: alpha(opacity=100) !important;
opacity:1 !important;
}
jsFiddle
Related
So I have an ambitious idea on something I want to do specifically and want to know the best way to carry it out or if it's even possible.
I want it so when I hover over one of the tabs it plays a gif animation (like some arrow or something) once then leaves it in that last frame (so it doesn't continuously loop then is clickable.
I doubt my code will be any help at all but I'll leave it here anyway (I know it's messy and that I should fix it but I'm sorta new to this.)
<!DOCTYPE html>
<html lang="en-US">
<html>
<style>
head {
background-color: white;
}
span.mainbar {
display: inline-block;
margin-left:10px;
margin-top:3px;
}
span.text {
display: inline-block;
float:right;
margin-right:25px;
margin-top: 27px;
}
span.bar
{
display: inline-block;
float:right;
margin-right:25px;
margin-top: 20px;
}
span.facebook {
display: inline-block;
float:right;
margin-right:30px;
margin-top: 22px;
}
span.instagram{
display: inline-block;
float:right;
margin-right:22px;
margin-top: 22px;
}
span.twitter{
display: inline-block;
float:right;
margin-right:30px;
margin-top: 16px;
}
</style>
<head>
<title> The Project </title>
<link rel="shortcut icon" href="images/favicon.ico"/>
<span class="mainbar">
<a href="Homepage.html">
<img src="images/Temp Text Logo.png" alt="Main Logo" style=";border:0;">
</a>
</span>
<Span class="twitter">
<a href="https://www.twitter.com"target="_blank">
<img src="images/twitter.png" alt="twitter page"
style="width:50px;height50px:;border:0;">
</a>
</span>
<Span class="instagram">
<a href="https://www.instagram.com"target="_blank">
<img src="images/instagram.png" alt="instagram page" style=";border:0;">
</a>
</span>
<Span class="facebook">
<a href="https://www.facebook.com"target="_blank">
<img src="images/facebook.png" alt="facebook page" style=";border:0;">
</a>
</span>
<span class="bar">
<img src="images/bar.png" alt="bar" style=";border:0;">
</a>
</span>
<span class="text">
<a href="about.html">
<img src="images/about.png" alt="about" style=";border:0;">
</a>
</span>
<span class="text">
<a href="shop.html">
<img src="images/shop.png" alt="shop" style=";border:0;">
</a>
</span>
<span class="text">
<a href="Homepage.html">
<img src="images/home.png" alt="Home" style=";border:0;">
</a>
</span>
</head>
<body>
<hr>
</hr>
</body>
</html>
Tab example pic
All you need to do to make an image clickable is to wrap the image in a hyperlink parent:
<a href="http://www.google.com">
<img src="http://placehold.it/100">
</a>
As for only allowing the link to be clickable after the animation has played, it would theoretically be possible through JavaScript, but I wouldn't recommend that. The only way to do it would be with a timeOut, and you would possibly encounter a state where the timing gets out of sync.
Instead of this, I would recommend using a sprite map instead of a GIF.
Hope this helps! :)
You can't control animated gif without javascript/jquery control.
With 2 image, one static and one animated and control the start of animation with jquery, like this solution: Stop a gif animation onload, on mouseover start the activation
Using jquery plugin like this: http://rubentd.com/gifplayer/
Why does toggling display and opacity on an anchor's child elements affect touch events differently on iOS devices?
I have a navigation menu in which each item contains an image and a short string of text.
Each image has a :hover state that uses the same shared overlay image.
If the :hover pseudo class sets the overlay image's display value, users on iOS devices have to tap the link twice.
If the :hover pseudo class sets the overlay image's opacity value, users on iOS devices do not have to tap the link twice.
In both cases, it doesn't matter if the overlay image covers the entire base image or is a smaller inset overlay.
In both cases, including the :active and :focus pseudo classes does not change the behavior.
I know that I can just remove the :hover rules with JavaScript for touch devices. I'm wondering if anyone knows the why there is a difference between display and opacity.
a {
display: inline-block;
height: 200px;
position: relative;
width: 150px;
}
a img.overlay {
display: block;
left: 0;
position: absolute;
top: 0;
}
a.overlay-display img.overlay {
display: none;
}
a.overlay-display:hover img.overlay {
display: block;
}
a.overlay-opacity img.overlay {
opacity: 0;
}
a.overlay-opacity:hover img.overlay {
opacity: 1;
}
<p>
Set overlay display:
</p>
<a class="overlay-display overlay-display-first" href="http://www.google.com" target="_blank">
<img class="overlay" src="http://placehold.it/150x150/ff0000">
<img src="http://placehold.it/150x150"> link text
</a>
<a class="overlay-display overlay-display-last" href="http://www.google.com" target="_blank">
<img src="http://placehold.it/150x150">
<img class="overlay" src="http://placehold.it/150x150/ff0000"> link text
</a>
<a class="overlay-display overlay-display-first" href="http://www.google.com" target="_blank">
<img class="overlay" src="http://placehold.it/50x50/ff0000">
<img src="http://placehold.it/150x150"> link text
</a>
<a class="overlay-display overlay-display-last" href="http://www.google.com" target="_blank">
<img src="http://placehold.it/150x150">
<img class="overlay" src="http://placehold.it/50x50/ff0000"> link text
</a>
<p>
Set overlay opacity:
</p>
<a class="overlay-opacity overlay-opacity-first" href="http://www.google.com" target="_blank">
<img class="overlay" src="http://placehold.it/150x150/ff0000">
<img src="http://placehold.it/150x150"> link text
</a>
<a class="overlay-opacity overlay-opacity-last" href="http://www.google.com" target="_blank">
<img src="http://placehold.it/150x150">
<img class="overlay" src="http://placehold.it/150x150/ff0000"> link text
</a>
<a class="overlay-opacity overlay-opacity-first" href="http://www.google.com" target="_blank">
<img class="overlay" src="http://placehold.it/50x50/ff0000">
<img src="http://placehold.it/150x150"> link text
</a>
<a class="overlay-opacity overlay-opacity-last" href="http://www.google.com" target="_blank">
<img src="http://placehold.it/150x150">
<img class="overlay" src="http://placehold.it/50x50/ff0000"> link text
</a>
Additionally, it doesn't seem to matter if I'm toggling an inline element or a block element. In this snippet, I'm toggling a span inside the anchor.
a {
display: inline-block;
height: 200px;
position: relative;
width: 150px;
}
a.text-display span.overlay {
display: none;
}
a.text-display:hover span.overlay {
display: inline;
}
a.text-opacity span.overlay {
opacity: 0;
}
a.text-opacity:hover span.overlay {
opacity: 1;
}
<p>
Set text display:
</p>
<a class="text-display text-display-last" href="http://www.google.com" target="_blank">
<img src="http://placehold.it/150x150"> link text
<span class="overlay">some other text</span>
</a>
<p>
Set text opacity:
</p>
<a class="text-opacity text-opacity-last" href="http://www.google.com" target="_blank">
<img src="http://placehold.it/150x150"> link text
<span class="overlay">some other text</span>
</a>
According to the iOS Developer Library documentation for One-Finger Events:
Mouse events are delivered in the same order you'd expect in other web
browsers illustrated in Figure 6-4. If the user taps a nonclickable
element, no events are generated. If the user taps a clickable
element, events arrive in this order: mouseover, mousemove, mousedown,
mouseup, and click. The mouseout event occurs only if the user taps on
another clickable item. Also, if the contents of the page changes on
the mousemove event, no subsequent events in the sequence are sent.
This behavior allows the user to tap in the new content.
The problem is that it's not clear what constitutes a content change.
Setting display:none removes the element from the document flow; setting display:block (or display:inline) will put it back into the document flow, which would be a content change akin to creating and adding a new element on the fly.
When you're changing opacity, the element is always in the document flow, just not visible.
Try using display:hidden rather than display:block. If I'm right, display:hidden won't cause you any trouble with double-taps either. Using "hidden" does not remove the element from the document flow, which is why there's a blank space equivalent to the size of the hidden object when the object is not visible.
https://www.w3.org/TR/CSS2/visuren.html#display-prop
How can I add a hover effect to the img after mouse is over link Text using CSS?
<div class="myTextContainer">
<p>
<a href="#">
<img height="128" width="128" title="icon1" alt="icon1" src="icon1.png" ">
</a>
</p>
<h2>
Text
</h2>
</div>
Try adding some JavaScript. In my case i added html attribute onmouseover and onmouseleave to call a javascript function. fun1 on hover and fun 2 onleave. I added id hover on my image and i said on each function to get the element of the id hover which is my image and change the backgroundColor='blue'. On hover i set it to blue and onleave i set it to red. You can change other elements like the src by doing style.src='here/put/the/image/source/img.png' and add different src on hover or leave. If you need more info leave a comment. Did this help?
function fun1(){
document.getElementById("hover").style.backgroundColor='blue';
}
function fun2(){
document.getElementById("hover").style.backgroundColor='red';
}
#hover{
background-color:red;
}
<div class="myTextContainer">
<a href="#">
<img id="hover" height="128" width="128" title="icon1" alt="icon1" src="icon1.png">
</a>
<h2>
Text
</h2>
</div>
-------- Or by doing this without script tag or file --------
#hover{
background-color:red;
}
<div class="myTextContainer">
<p>
<a href="#">
<img id="hover" height="128" width="128" title="icon1" alt="icon1" src="icon1.png">
</a>
</p>
<h2>
Text
</h2>
</div>
Change your HTML markup and put both, icon and text into one link.
<h2>
<a>
<img ...>
TEXT
</a>
</h2>
Than you can use simply
a:hover {color: red;} /* red text 'TEXT' */
a:hover img {border: 1px solid green}
Since h2 and p are siblings but you want to add hover on h2 img which is before p, you cannot do it with CSS. You need javascript:
document.querySelectorAll('a')[1].addEventListener('mouseover', fn, false);
document.querySelectorAll('a')[1].addEventListener('mouseout', fn2, false);
function fn(e) {
if(e.target.innerHTML == 'Text') {
document.querySelector('img[src="icon1.png"]').className = 'hover';
}
}
function fn2(e) {
if(e.target.innerHTML == 'Text') {
document.querySelector('img[src="icon.png"]').className = '';
}
}
you could declare:
.myTextContainer a:hover img {
// your CSS
}
I and using addthis share plugin and have changed background color to yellow and also added bottom-border: of 1px, I want to remove the bottom border from the last a which is not working for me using following css
css
div#at4-share a:last-child
{
border-bottom: 0px solid #1f1f1f;
}
HTML
<div id="at4-share" class="addthis_32x32_style atss atss-left addthis-animated slideInLeft at4-show">
<a class="at4-share-btn at-svc-facebook" href="#">
<span class=" at4-icon aticon-facebook" title="Facebook">Facebook</span>
</a>
<a class="at4-share-btn at-svc-twitter" href="#">
<span class=" at4-icon aticon-twitter" title="Twitter">Twitter</span>
</a>
<a class="at4-share-btn at-svc-pinterest_share" href="#">
<span class=" at4-icon aticon-pinterest_share" title="Pinterest">Pinterest</span>
</a>
<a class="at4-share-btn at-svc-google_plusone_share" href="#">
<span class=" at4-icon aticon-google_plusone_share" title="Google+">Google+</span>
</a>
<a class="at4-share-btn at-svc-compact" href="#">
<span class=" at4-icon aticon-compact" title="More">More</span>
</a>
<div id="at4-scc" class="at-share-close-control ats-transparent at4-show at4-hide-content" title="Hide">
<div class="at4-arrow at-left">Hide</div>
</div>
</div>
I had tried
div#at4-share a:last-of-type
{
border-bottom: 0px solid #1f1f1f;
}
so i am not sure what is wrong
You need to use :last-of-type, because :last-child is div with text hide in this case.
div#at4-share a:last-of-type {border-bottom: 2px solid red;}
https://jsfiddle.net/4y9j0z9q/
See the :last-child too
https://jsfiddle.net/4y9j0z9q/1/
The correct selector is :last-of-type.
div#at4-share > a:last-of-type
{
border-bottom:none; /* To remove the bottom border. */
}
FIDDLE
The original idea came from the following
http://freshdesignweb.com/demo/2012/09/css3-hover-effects/
It is a simple hover over image then text relevant to that image drops below it.
I want to modify the area in which the text displays to add rich snippet code, a buy it now button, and an add to cart button. I am having two issues 1) any img scr added between the li automatically appears in the image box and 2) anywhere you click on the image or box takes you to another page since it is an anchor.
the css
.our_menu{width:970px; margin:0 auto;}
ul,li{margin:0;padding:0;list-style:none}
.menu .item{float:left;position:relative}
.menu .item a{background-color:#FFF;color:#000000;display:block;overflow:hidden;position:absolute;box-shadow:0 0 7px 0 #CCC;-moz-box-shadow:0 0 7px 0 #CCC;-webkit-box-shadow:0 0 7px 0 #CCC}
.menu .item a:hover{z-index:2;-webkit-transition:height .2s ease-in-out;-moz-transition:height .2s ease-in-out;-o-transition:height .2s ease-in-out;-ms-transition:height .2s ease-in-out;transition:height .2s ease-in-out}
.menu .item a h3{border:0;font-family:"Times New Roman",sans-serif;font-size:17px;margin:0 0 .5em 0;padding:0;text-transform:uppercase;}
.menu .item a p{color:#432;font-size:16px;}
.our_menu .menu{float:left;margin:0 0 50px 0}
.our_menu .menu .item{background-position:9px -791px;height:170px;padding:0 0 0 7px;width:316px}
.our_menu .menu .item a{height:25px;padding:114px 0 0 14px;top:10px;width:295px;text-decoration:none;}
.our_menu .menu .item a:hover{height:550px;padding-top:179px}
.our_menu .menu .item a img{clip:rect(0px,283px,96px,0px);height:164px;position:absolute;top:14px;width:283px}
.our_menu .menu .item a:hover img{clip:auto}
#media only screen and (max-width: 967px) {
.our_menu{ width:660px;margin:0 auto;}
}
#media only screen and (max-width: 620px) {
.our_menu{ width:330px;margin:0 auto;}
}
Original html
<div class="our_menu">
<ul class="menu">
<li class="item">
<a href="#">
<h3>Appetizers</h3>
<p> Start a meal off right with your favorite from our menu of signature appetizers. Can't choose just one? You don't have to</p>
<img src="images/2.jpg" alt="" height="164" width="283">
</a>
</li>
The following is the rich snippet code I need to use to make the text in the box.
<span itemscope itemtype="http://schema.org/Product">
<img itemprop="image" src="http://www.example.com/images/hello.jpg" />
<h3 itemprop="name">Name of Product Here</h3>
<a itemprop="url" href="http://www.example.com/index.html"></a>
<span itemprop="offers" itemscope itemtype="http://schema.org/Offer"><h3 itemprop="price" class="price">$2.00</h3></span>
<p>
<span itemprop="description">Widget</span><br/>
UPC: 1234567890
</p>
<span>
The following is what I had working up until I wanted to add the buy it now button and add to cart button.
<a class="paypal"><img src="images/cart.gif" alt=""></a><a class="paypal"><img src="images/buynow.gif" alt=""></a>
<div class="our_menu">
<ul class="menu">
<li class="item">
<a itemprop="url" href="http://www.example.com/">
<span itemscope itemtype="http://schema.org/Product">
<img itemprop="image" src="images/hello.jpg" height="164" width="283"/>
<h3 itemprop="name">Product Name</h3>
<span itemprop="offers" itemscope itemtype="http://schema.org/Offer"><h3 itemprop="price" class="price">$2.00</h3></span>
<p>
<span itemprop="description">Widget</span><br/>
UPC: 074804800012<br/>
</p>
</a>
</li>
I created a jsFiddle thanks for the suggestion.
http://jsfiddle.net/3CmGN/
In the fiddle when you hover over the image a box containing text drops down. I want this effect as is. The issue I am having is I do not want the image as a anchor tag and want to add an "add to cart" and "buy it now" button under the UPC in the example.