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 =)
Related
I'm trying to add a cool little opacity transition for my extension. I've looked up many ways to go about this, and nothing has seemed to work so far. Is this even possible? I have the latest version of Chrome.
A preview of it not working
CSS:
.container .primary:after {
opacity: 0;
transition: opacity 6s ease-out;
}
.container .primary:hover:after {
opacity: 1;
content: "Go through a list of friends to remove";
position: absolute;
top: 100%;
width: 100vw;
height: 20px;
margin: 10px;
font-size: 13px;
}
It's hard to reproduce from your code but there's a few main problems:
Your pseudo element has top:100% so it's probably hanging off the bottom of the screen somewhere. You can use position:relative on the container to prevent this.
It's a bad idea to put text into pseudo elements. As another commenter pointed out, they can't be picked up by screen readers. Here's an in-depth article on the w3 website about this.
You absolutely do not want to transition something for 6 seconds! Try to stick to half a second maximum or your UI will feel slow. Here's a great writeup on the subject.
And finally, a full snippet combining the above suggestions. This is not perfect by any means, but it should be enough to get you started:
.container {
position: relative;
padding:10px;
font-family:'Arial';
border:1px solid black;
}
.container .tooltip {
opacity: 0;
transition: opacity 0.4s ease-out;
position: absolute;
top: 100%;
left: 0;
height: 20px;
padding:10px;
font-size: 13px;
}
.container .primary:hover .tooltip {
opacity: 1;
}
<div class="container">
<div class="primary">div
<div class="tooltip">"Go through a list of friends to remove"</div>
</div>
</div>
I'm trying to figure out how transforming, animating, and transitioning work, and I've followed atleast 1 or 2 crash courses and I have followed 5 solutions in problems related to this, and still nothing worked.
#tr-w {
transition: width 1s ease-in-out;
}
#tr-w:hover {
width: 50%;
}
#tr-h {
transition: height 2s ease-in-out;
}
#tr-h:hover {
height: 40vh;
}
#tr-r {
transition: width 1s ease-in-out, transform 2s ease-in-out;
}
#tr-r:hover {
transform: rotateZ(180);
width: 30vh;
}
JSFiddle: https://jsfiddle.net/q976oc0h/1/
CodeSandbox: https://codesandbox.io/s/dark-pine-i0ut5?file=/index.html
CodePen: https://codepen.io/ssssss12518/pen/rNMMZoL
It doesn't work on any code editor I know, even IDEs like Atom. (my main text editor)
There's a couple of things going on.
The transform functions als take a unit:
transform: rotateZ(180); -> transform:rotateZ(180deg);
The transition from height:auto; isn't intuitively supported.
There's a couple of work arounds. You could find exmaples on this question
Sidenote: Generally, transitioning on width/height is bad practice for performance. It will trigger a reflow/recalculate of the document structure. which is costly.
You would also notice that the text inside the divs gets squished into multiple lines or moves around a lot.
general approach is to use transform to shrink/grow/fold-out the elements. like you did for rotate.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Arial", sans-serif;
}
.container {
padding: 10px;
margin-left: 20px;
}
.container > *[class*="bg"] {
margin-left: 10px;
}
.bg-gray {
margin: 10px 0px;
background-color: #cbd5e0;
border: 3px solid black;
padding: 20px;
margin-bottom: 20px;
width: 30%;
}
#tr-w {
transition: width 1s ease-in-out;
}
#tr-w:hover {
width: 50%;
}
#tr-h {
transition: height 1s ease-in-out;
height:100px; /*I've added a base heigth to so the browser can calculate a starting value */
}
#tr-h:hover {
height: 40vh;
}
#tr-r {
transition: transform 1s ease-in-out;
}
#tr-r:hover {
transform: rotateZ(180deg); /*i've added a 'deg' as unit*/
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>Transition Animation CC</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="bg-gray" id="tr-w">
<p>
Hover over me
</p>
</div>
<div class="bg-gray" id="tr-h">
<p>
Hover over me
</p>
</div>
<div class="bg-gray" style="height: 30vh;" id="tr-r">
<p>
Hover over me
</p>
</div>
</div>
<script src="main.js" charset="utf-8"></script>
</body>
</html>
because you didn't set default height to #tr-h element
#tr-h {
transition: height 2s ease-in-out;
height:100px;
}
I am trying to make a simple navbar with some clickable links inside. However, right now I can't actually click the contents of the Navbar. I have a feeling the Navbar is "blocking" the accessibility of the links inside, but long story short I want to actually be able to click the links. I've attached snippets of my html and scss below. Where did I go wrong?
<nav class="cool-navbar">
<div class="left-buttons">
<a class="cool-link">Sammy Al Hashemi</a>
</div>
<div class="middle-spacer"></div>
<div class="right-buttons">
<a class="cool-link">Projects</a>
<a class="cool-link">Contact</a>
</div>
</nav>
.cool-navbar {
display: flex;
flex-direction: row;
width: 100vw;
height: $navbar-height;
background: inherit;
.left-buttons {
width: auto;
}
.middle-spacer {
flex-grow: 1;
}
.right-buttons {
width: auto;
}
.left-buttons .cool-link,
.right-buttons .cool-link {
display: inline-block;
text-align: center;
cursor: pointer;
padding: 15px 35px 12px 35px;
background: inherit;
font-family: $font-stack;
text-align: center;
font-size: $secondary-font-size;
color: $secondary-color;
animation: cool-button-entrance 1s ease-in-out 0s 1 backwards;
-webkit-animation: cool-button-entrance 1s ease-in-out 0s 1 backwards;
}
}
.cool-navbar::before {
content: '';
position: absolute;
border-bottom: $secondary-color solid 1px;
width: 100%;
height: $navbar-height;
animation: cool-border-animation 1s ease-in-out 0s 1 both;
-webkit-animation: cool-border-animation 1s ease-in-out 0s 1 both;
}
The problem is the <a> tag links haven't been given a hypertext reference. It can be set with the href attribute like so: <a href="link goes here"> You can set the reference to '#' as a placeholder until you have a link to place:
<nav class="cool-navbar">
<div class="left-buttons">
Sammy Al Hashemi
</div>
<div class="middle-spacer"></div>
<div class="right-buttons">
Projects
Contact
</div>
</nav>
Hope this helps
Figured it out! It was because the ::before pseudoelement was hovering over the link, blocking it being clicked. I instead set its top: $navbar-height and removed its height. This stopped causing it to block.
I have a working example, but I want to format the text which is shown when the image gets hovered. Here is the code:
.ecommerce-categories [class^=col-] > a:before {
content: attr(data-text);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 50px 20px;
color: #fff;
word-wrap: break-word;
overflow: hidden;
background-color: rgba(0,0,0,0.4);
opacity: 0;
-webkit-transition: all .7s ease;
transition: all .7s ease;
}
.ecommerce-categories [class^=col-] > a:hover:before {
opacity: 1;
}
<div class="col-lg-4 categories">
<a href="#" data-text="Day for rafting and outdoor activities" style="background: url('images/catagories/cat-rafting.jpg') no-repeat center center; background-size: cover;" >
I want to be able to edit the text inside the attribute 'data-text' with html tags. How should I refactor this code so I can do that? (data-text="Day for rafting and outdoor activities").
Thank you.
Per the spec HTML added in the CSS content attribute does not alter the document tree. So in your case you can't format a part of the text contained in data-text.
To do so you can make use of javascript. There is a ton of javascript tooltip plugins / libraries / code examples available on the internet.
Hey I would like a magnifying glass or some image to pop over another image when on mouseover like this website - http://www.elegantthemes.com/gallery/ When you hover over an image an image appears over it. Does anyone know how to achieve this?
Not sure if you need any code but here's my css for the img tag:
img {
width: 600px;
height: 342px;
border-radius: 1px;
}
You can do it with
HTML
<div id="yourImage" ></div>
CSS
#yourImage {
background-image: url('image1.jpg');
}
#yourImage:hover {
background-image: url('overimage.jpg'), url('image1.jpg');
}
There is a jquery plugin for this.
The first effect is what you're looking for.
You can try this. I think it uses only CSS.
You need to check the CSS position attribute, so you can have both elements on the same place.
And then just chang the opacity of the hover image.
#Mateusz has the best answer, but I would improve upon that by adding the css transition something along the lines of this:
-webkit-transition: opacity 1s ease-in;
-moz-transition: opacity 1s ease-in;
-o-transition: opacity 1s ease-in;
transition: opacity 1s ease-in;
Try this:
HTML:
<div class="your-img">
<div class="your-hover"></div>
</div>
CSS:
.your-img {
width: 300px; /* your image width and height here */
height: 225px;
background-image: url('../img/image_01.png');
}
.your-hover {
width: 300px;
height: 225px;
opacity: 0;
filter: alpha(opacity = 0);
background-image: url('../img/image-hover_01.png');
}
.your-hover:hover {
opacity: 0.5;
filter: alpha(opacity = 50);
}
filter: alpha is for IE, I hope it helps.