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;
}
Related
How do I make my LinkedIn badge transition smoothly fade in and out?
I know the basics of Web Developing and I have been using and learning HTML and CSS on visual studio code for 3 or 4 days, recently I was creating a personal website which is still in the making and I came across a confusion in which the transition command of CSS is not working for me I don't know why I want the LinkedIn badge to Fade in and Fade out in approximately 2 or 3 seconds smoothly but it is not letting me.
This is the Code: https://jsfiddle.net/JadeDoe/1jvs6rhy/9/
CSS :
.badge-base {
display: none;
position: absolute;
top: 24px;
left: 16%;
transition: 1s;
}
.Heading:hover+.badge-base {
display: inline;
}
.Heading:hover .badge-base,
.badge-base:hover {
display: block;
}
You can't transtion display none to block. You can however do it using opacity (although it's not the exact thing because the element would still take up space)
.badge-base {
position: absolute;
top: 24px;
left: 40%;
transition: 1s;
opacity: 0;
pointer-events: none;
}
.Heading:hover+.badge-base {
display: inline;
opacity: 1;
pointer-events: all;
}
.Heading:hover .badge-base,
.badge-base:hover {
display: inline;
opacity: 1;
pointer-events: all;
}
<body>
<div>
<h1 class="Heading">Jane D Walker</h1>
<div class="badge-base LI-profile-badge" data-locale="en_US" data-size="medium" data-theme="dark" data-type="VERTICAL" data-vanity="g-mail-assistance-704528251" data-version="v1">
<a class="badge-base__link LI-simple-link" href="https://pk.linkedin.com/in/g-mail-assistance-704528251?trk=profile-badge"></a>
</div>
</div>
<script src="https://platform.linkedin.com/badges/js/profile.js" async defer type="text/javascript"></script>
</body>
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?
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.
I am making a website where i need some help with animation.
I have a div which is something like this:
<div id="header">
<h1>Welcome</h1>
<img src="....Image">
</div>
The image should not be shown at first - but when a user click this header, it should drop down as an animation from the top.
All help is appreciated.
A vague question gets a vague answer :) But take a look at http://daneden.github.io/animate.css/ where you can get a nice effect like that. I would only include the animation I'd use from the CSS file. You have to trigger this with JavaSript on click, then add a class to the text that triggers the animation.
Try this,
CSS
#header {
position: relative;
}
#header img {
position: absolute;
left: 0;
top: -150px; <!-- Your Image height + some -->
opacity: 0;
-webkit-transition: all 300ms;
-moz-transition: all 300ms;
transition: all 300ms;
}
#header.toggled img {
top: 50px;
opacity: 1;
}
JS(jQuery)
$('#header').click(function(){
$(this).toggleClass('toggled');
});
http://codepen.io/anon/pen/OPaqzP