I seemed to have come across a mini roadblock in my HTML/CSS.
I tried to use this crossfade technique in my index and it worked fine but when I tried to use it in my second layout the image wouldn't appear when I opened it? :(
heres the HTML for layout 2:
<!DOCTYPE html>
<html>
<head>
<title>Welcome!</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/style.css" type="text/css">
</head>
<body>
<img class="image5" src="../images/header.png" alt="header">
<a href="../index.html"><div id="cf" >
<img class="bottom2" src="images/logo4.png" alt="logo4"/>
<img class="top2" src="images/logo3.png" alt="logo3"/>
</div>
</body>
</html>
and here is the CSS for it:
.image5 {
position: absolute;
top: 0px;
left: 0px;
width: 1500px;
height: 700px;
}
#cf {
position:relative;
top: 20px;
left:20px;
height:277px;
width:277px;
}
#cf img {
position:absolute;
left:0;
opacity: 1;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf img.top2:hover {
opacity:0;
}
I tried putting it through a validator and it showed two errors:
- Error 1:
Line 20, Column 7: End tag for body seen, but there were unclosed elements.
</body>
- Error 2:
Line 15, Column 24: Unclosed element a.
<a href="../index.html"><div id="cf">
I'm not sure what it means by that.
Sorry, I'm still a beginner. ^^;;
Your css is looking for a tag #cf id and then an img within it. Maybe it's improper nesting that's messing it up. For your validation errors, you didn't close youre link tag. <a href ...> needs to be closed with </a>. Try closing it and see if it helps.
Related
I'm working on the AMP website http://trentontelge.com/. I have SVG social media links in <a> tags at the bottom of the page. Google's AMP validator says the page is valid code, and everything else displays properly, but for some reason, AMP is generating some CSS and appending to my <head> that display:none's the anchors for my social links. How do I stop this from being appended?
Here is the code for one of the links:
<a class="social-link" itemprop="sameAs" target="_blank" rel="noreferrer" href="https://github.com/trenton-telge">
<amp-img layout="responsive" width="1" height="1" alt="GitHub" class="social-button-img" src="./img/social/github.svg" >
<div fallback>GitHub</div>
</amp-img>
</a>
and CSS:
.social-button-img{
margin: .05in;
max-height: 15vw;
max-width: 15vw;
height: .7in;
width: .7in;
}
/* unvisited link */
.social-link:link {
opacity: 1;
-webkit-transition: opacity .5s;
transition: opacity .5s;
transition-timing-function: ease-in-out;
}
/* visited link */
.social-link:visited {
opacity: 1;
-webkit-transition: opacity .5s;
transition: opacity .5s;
transition-timing-function: ease-in-out;
}
/* mouse over link */
.social-link:hover {
opacity: .5;
-webkit-transition: opacity .5s;
transition: opacity .5s;
transition-timing-function: ease-in-out;
}
/* selected link */
.social-link:active {
opacity: 1;
-webkit-transition: opacity .5s;
transition: opacity .5s;
transition-timing-function: ease-in-out;
}
And here is the script that is being appended to the bottom of my <head>
<style type="text/css">
:root [href^="https://www.amazon."][href*="tag="],
:root .social-link,
:root img[alt="Facebook"],
:root img[alt="Google+"],
:root img[alt="LinkedIn"]
{ display: none !important; }
:root *[xsscq7p][hidden] { display: none !important; }
</style>
Your page appears to be valid AMP and I'm unable to reproduce what you're describing on my PC.
Perhaps most importantly, the <style> tag that you're referring to most likely isn't added by AMP. The only CSS added by AMP is in amp.css and searching the AMPHTML repo for "social-link" yields no results. My best guess is that it's added by a browser extension (perhaps some ad / tracking blocker) or something similar. Can you try to reproduce in a different browser or on a different device?
I'm using this to create a mouseover effect:
<a href="http://glim.pt/produtos/cadeiras">
<img src="http://glim.pt/wp-content/uploads/2017/02/cadeiras_categoria-300x300.png"
onmouseover=" this.src='http://glim.pt/wp-content/uploads/2017/02/cadeiras_cat2-300x300.png';"
onmouseout=" this.src='http://glim.pt/wp-content/uploads/2017/02/cadeiras_categoria-300x300.png';">
</img>
</a>
But I wanted it to be smoothly, how can I add fade effect? It's for a Wordpress page.
You can accomplish this using CSS transitions, if you aren't opposed to it as detailed in this blog post on crossfading images:
/* A wrapper for your images to transition */
.transition-wrapper {
position:relative;
height:300px;
width:300px;
margin:0 auto;
}
/* Position each image and apply a transition */
.transition-wrapper img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
/* Automatically hide an image during hover (to reveal the other one) */
.transition-wrapper img:last-of-type:hover {
opacity:0;
}
And then simply update your markup accordingly :
<a class='transition-wrapper' href="http://glim.pt/produtos/cadeiras">
<img src='http://glim.pt/wp-content/uploads/2017/02/cadeiras_cat2-300x300.png' />
<img src='http://glim.pt/wp-content/uploads/2017/02/cadeiras_categoria-300x300.png' />
</a>
Example
/* A wrapper for your images to transition */
.transition-wrapper {
position:relative;
height:300px;
width:300px;
margin:0 auto;
}
/* Position each image and apply a transition */
.transition-wrapper img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
/* Automatically hide an image during hover (to reveal the other one) */
.transition-wrapper img:last-of-type:hover {
opacity:0;
}
<a class='transition-wrapper' href="http://glim.pt/produtos/cadeiras">
<img src='http://glim.pt/wp-content/uploads/2017/02/cadeiras_cat2-300x300.png' />
<img src='http://glim.pt/wp-content/uploads/2017/02/cadeiras_categoria-300x300.png' />
</a>
Sounds like your going to want to add some javascript to that.
I recommend using the jQuery library.
https://jquery.com/
Here you can find a bunch of different fade effects and the documentation
http://api.jquery.com/
With jQuery:
$('a').hover(function(){
$(this).children().fadeOut(100, function(){
$(this).children().remove();
});
$(this).append($('<img src="http://glim.pt/wp-content/uploads/2017/02/cadeiras_cat2-300x300.png"</img>').hide().fadeIn(2000));
}, function(){
$(this).children().fadeOut(100, function(){
$(this).children().remove();
});
$(this).append($('<img src="http://glim.pt/wp-content/uploads/2017/02/cadeiras_categoria-300x300.png"></img>').hide().fadeIn(2000));
});
a {
display: block;
width: 300px;
height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<a href="#">
A link
<img src="http://glim.pt/wp-content/uploads/2017/02/cadeiras_categoria-300x300.png"></img>
</a>
Some quick example, but you'll have to fix the issue of the image, that fades in, while the first image fades out. But the post above has much more better solution via css.
<div class="fadehover">
<img src="cbavota-bw.jpg" alt="" class="a" />
<img src="cbavota.jpg" alt="" class="b" />
</div>
If this is what you mean? or what you are looking for? I tried to answer to the best of my ability.
I need to do just a simple transition of background img, but searching for tutorials I found out a way to do it.
But its not working? Don't know why?
#chat
{
background-image:url(chat.png);
width:91px;
height:40px;
float:right;
transition: background-image 1s ease-in-out;
}
#chat:hover
{
background-image:url(hchat.png);
width:91px;
height:40px;
}
Link of code:
http://jsfiddle.net/xscsz5c0/2/
Is there something, I am missing? Coz I am not that good in CSS!
Because background transition doesn't work in Firefox, here's a workaround (which also gets around the problem of the hover image not loading with the page): http://codepen.io/pageaffairs/pen/azHli
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#chat
{
background:url(http://i62.tinypic.com/29or6z6.png);
width:91px;
height:40px;
position: relative;
display: inline-block;
}
#chat::after
{
content: "";
display: inline-block;
background: url(http://i57.tinypic.com/i26j3b.png);
width:91px;
height:40px;
opacity: 0;
-moz-transition: opacity 5s ease-in-out;
-webkit-transition: opacity 5s ease-in-out;
-o-transition: opacity 5s ease-in-out;
transition: opacity 5s ease-in-out;
}
#chat:hover::after
{
opacity: 1;
}
</style>
</head>
<body>
<a id="chat" href="chat.php"></a>
</body>
</html>
My favorite way to deal with this is with a jQuery plugin called anystretch. You will need to download the anystretch js file and add it to your project. You will also need to have jquery.
I love anystretch because it replaces the target div with a specified image but also lets you chose a fadeIn time for it.
I had issues with using the css transition because it's cross-browser functionality was horrible.
sample on codepen http://codepen.io/cwilliams23/pen/iIomJ
$(document).ready(function() {
$("#chat").mouseenter(function() {
$("#chat").anystretch("http://i57.tinypic.com/i26j3b.png", {speed: 200});
$("#chat").mouseleave(function() {
$(this).anystretch("http://i62.tinypic.com/29or6z6.png", {speed: 1000});
});
});
});
You can play with the fade times to make it fade the way you want. The speed settings are in ms so 5s would be 5000.
Add display:inline-block to your code:
#chat:hover
{
background-image:url(http://i57.tinypic.com/i26j3b.png);
width:91px;
height:40px;
display:inline-block;
}
Demo
This website is based on wordpress
http://www.gear-rat.com/
How can I get that image effect can anyone help me? in HTML5 and CSS3
I just started web design and am still learning by copying good websites so I can get handy with web design, ofc I'm not selling them or anything illegal
That effect is done with the following code:
JavaScript:
jQuery(document).ready(function() {
function tz_overlay() {
jQuery('.post-thumb a').hover( function () {
jQuery(this).find('.overlay').stop().animate({ opacity: 1 }, 200);
}, function () {
jQuery(this).find('.overlay').stop().animate({ opacity: 0 }, 200);
});
}
tz_overlay();
});
CSS:
.post-thumb a span.overlay
{
background: rgba(0, 0, 0, 0.8);
position: absolute;
width: 100%;
height: 60%;
display: block;
line-height: 20px;
z-index: 5;
filter: alpha(opacity=0);
-khtml-opacity: 0;
-moz-opacity: 0;
opacity: 0;
text-align: center;
padding-top: 40%;
color: #ada89c;
font-size: 15px;
font-weight: bold;
}
HTML:
<div class="post-thumb port-thumb">
<a href="http://www.gear-rat.com/test/portfolio/steel-riveted-box/">
<span class="overlay" style="opacity: 0;">Steel Riveted Box</span>
<img src="http://www.gear-rat.com/test/wp-content/uploads/2013/06/boxthumb1.jpg" alt="Steel Riveted Box" style="opacity: 1;">
</a>
</div>
How I found the code:
I looked at the images and noticed they all had a class called overlay, so I looked in the .js files for any mention of overlay and saw it being used in the tz_overlay function. So I copied that function and the div surrounding an image to my website. When I opened a page with that div in it, it worked like that website so I know I had it.
It is a good idea to look around for specific indicators like that when trying to find out how something works on a website.
You can solve this with only html and css3, you don't need javascript or a javascript library.
<html>
<head>
<title>hello world</title>
<style type="text/css">
div#tmp{
background-color: #A36333;
height: 100px;
width: 100px;
}
div#tmp div{
background-color: #000000;
height: 100%;
width: 100%;
color: #ffffff;
line-height: 100px;
vertical-align: middle;
text-align: center;
opacity: 0.0;
transition: opacity 0.2s linear 0s;
-webkit-transition: opacity 0.2s linear 0s;
-ms-transition: opacity 0.2s linear 0s;
-moz-transition: opacity 0.2s linear 0s;
}
div#tmp div:hover{
height: 100%;
width: 100%;
opacity: 0.6;
}
</style>
</head>
<body>
<div id='tmp'>
<div>hello world</div>
</div>
</body>
</html>
The transition property defines how elements in html change.
http://www.w3schools.com/css/css3_transitions.asp
To alter an element by mouse over you can use the css :hover selector in css.
http://www.w3schools.com/cssref/sel_hover.asp
Check out this fiddle:
http://jsfiddle.net/5tmt98sk/
Visit the JS Fiddle page
When you are on the jsfiddle page, put your mouse over the image
The website you looked at does the same thing, but there image is the same image, but they photoshop it to be darker, and the photoshop some text on to it.Same concept =)
I'm trying to make a picture over picture fading with some text appearing on them purely with CSS3. I took the basic fading from here: http://css3.bradshawenterprises.com/cfimg1/
Now what I'm trying to do is, that when I hover the picture, then not only an other picture fades in, but some text too what contains a clickable link (for ie. a download link). The first problem was that the text appeared outside the div, which I could fix by adding this:
.crossfade h1 {
position: absolute;
}
I use h1, because paragraphs don't appear at all. So after this, I got the fading right, and even the text is in it's place, but it's not selectable and not clickable, it appears like it's a part of the image.
Here's my code so far (the html and the css part too):
<div class="crossfade">
<img class="bottom" src="pics\hover.jpg" />
<h1>Title</h1>
<img class="top" src="pics\23.jpg" />
</div>
.crossfade {
position:relative;
height:200px;
width:200px;
margin:0 auto;
}
.crossfade img {
position:absolute;
left: 0;
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
-ms-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.crossfade img.top:hover {
opacity: 0;
}
.crossfade h1 {
position: absolute;
}
Any help or ideas on it would be greatly appreciated.
Thanks in advance.
http://jsfiddle.net/3tkWj/5/
I just added another :hover and z-index.
.crossfade img.top:hover, .crossfade p:hover+img {
opacity: 0;
}
edit : Here's a working exemple of what you want (see comments)
http://jsfiddle.net/3tkWj/12/
Beware, I trimed the CSS.