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.
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>
So, on hoovering an image, a button appears onto the image, but it is not clickable . The same applies for links or anything inside the div holding the image. I was wondering how i can get over with this.
My html
<div class="content_img">
<img [src]="mydata.image.original" >
<div >
<button type="button"class="btn btn-primary"> Description </button>
</div>
</div>
My Css
/* Parent Container */
.content_img{
position: relative;
width: 90%;
}
/* Child Text Container */
.content_img div{
position: absolute;
bottom: 0;
right: 0;
background:black;
color: white;
margin-bottom: 5px;
font-family: sans-serif;
opacity: 0.7;
visibility: hidden;
-webkit-transition: visibility 0s, opacity 0.5s linear;
transition: visibility 0s, opacity 0.5s linear;
}
/* Hover on Parent Container */
.content_img:hover{
cursor: pointer;
}
.content_img:hover div{
width: 100%;
height: 100%;
visibility: visible;
opacity: 0.75;
}
Can anyone help me out please
What do you mean by that ? I tested the code and <a> tag works. I tested it like follow :
<a href="www.google.com" target="">
<button type="button"class="btn btn-primary">Description</button>
</a>
The button link is clickable. If it is a button, did you set a onclick event so that button call your function?
working on my new homepage, in wordpress but using the html editor because wordpress themes slow my site down like all hec. I'm nearly ready to go, just wondering how I accomplish the following:
On my staging page here you can see
Another image appears in front of it. I want that image to fade out after the mouse moves off the image.
Here's my code that got it going:
<div class="imageBox">
<div class="imageInn">
<img src="https://pausethemoment.photography/wp-content/uploads/2017/07/Melbourne-Wedding-Photography-Pause-The-Moment-Beach-Wedding-Photography-610x345.jpg" alt="Sandringham Melbourne Wedding Photography - Sun sets on couple on a beach.">
</div>
<div class="hoverImg">
<img src="https://pausethemoment.photography/wp-content/uploads/2017/07/Wedding-Photography-Melbourne-Limited-Dates-Overlay.png" alt="Pause The Moment Melbourne Wedding Photography" width="610" height="345" class="aligncenter size-full wp-image-14308" />
</div>
</div>
And then this CSS:
.imageBox
{
position: relative;
float: left;
}
.imageBox .hoverImg {
visibility:hidden;
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
}
.imageBox:hover .hoverImg {
display: block;
visibility: visible;
opacity: 1;
}
Have tried using the ::after tag on
.imageBox .hoverimage
in various formats like this:
.imageBox:hover::after .hoverImg
{
visibility:visible;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
but to no avail. Have also played around with animation delays etc, but can't seem to get it to stay on there! Tried webkit transitions but I couldn't even get them to fade it in. Any help greatly appreciated!
The problem seems to be with using the visibility property. CSS transition doesn't know how to generate intermediate values between "visible" and "hidden" because those values are not numeric.
Try removing all occurrences of visibility and applying the transition to opacity only.
.imageBox {
position: relative;
float: left;
}
.imageBox .hoverImg {
/*visibility:hidden;*/
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: /*visibility 0s,*/ opacity 0.5s linear;
}
.imageBox:hover .hoverImg {
display: block;
/*visibility: visible;*/
opacity: 1;
}
I have a series of round images that are part of an image gallery. I’ve added an overlay and positioned the text in the location that I want, but now the overlay is removing the URL link to the image, and I'm trying to get the overlay to retain the link.
I’m working with a SquareSpace template so I can’t move any of the blocks around as they are rendered by CMS.
The text is in this here: .image-slide-title, and the image is here: .thumb-image .loaded, and the link has these classes: image-slide-anchor .content-fit
This is the page I'm working on: https://cesare-asaro.squarespace.com/work
And this is the code that I have so far for this particular section:
#portfolio {
background-repeat: repeat;
background-color: rgba(239,93,85,1);
}
.margin-wrapper:hover { //for portfolio hovers
position: relative;
}
.margin-wrapper:hover a:after {
opacity:.8;
}
.margin-wrapper a:after {
border-radius: 50%;
content: '\A';
position: absolute;
width: 100%; height:100%;
top:0; left:0;
background:rgba(255,255,255,0.8);
opacity: 0;
transform: scale(1.002)
margin: 0 -50% 0 0;
transition: all .7s;
-webkit-transition: all .7s;
}
.sqs-gallery-container{
overflow: visible;
}
.margin-wrapper:hover .image-slide-title{
opacity:1;
color: rgba(239,93,85,1);
-webkit-transition: all .7s;
}
.image-slide-title{
font-size: 50px;
text-transform: uppercase;
line-height: 100%;
opacity:0;
position: absolute;
margin: -100% 0;
height:100%;
width: 100;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
white-space: normal;
}
I’m getting quite confused by the different approaches, some with JS some without, and the multiple uses of :after and :hover (I just tinker a bit with code).
Your overlay is probably blocking the click event to the thing below it, preventing it from triggering the link.
Just add pointer-events: none to the overlay. This will make it not capture the click, allowing it to fall to the element below it.
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 =)