I am currently trying to make a h1 link that transforms when hovering over it. This works perfectly, when placing the /a outside of h1 However, doing this resolves in making the whole element react and clickable when hovering over it - it just looks bad. Placing /a inside /h1 makes only the text clickable as desired - yet it doesn't react to hover, but to all other changes it does.
Please note that I am a beginner and I do not know what exact context is required for you to help me.
This lets hover work, but makes the whole element clickable.
#headlines a:hover {
transform: scale(1.5);
transition: 0.1s;
}
<div class="grid_6" style="color: black; text-align: center">
<a href="headlines.html"
id="headlines"
style="text-decoration: none; color: black">
<h1> Headlines
</h1></a>
<hr>
</div>
Apply transform to the h1 on hover...but make the h1 as display:inline-block so it's no bigger than it needs to be.
The link will always be clickable but it should solve the sizing issue.
a#headlines h1 {
display: inline-block;
}
a#headlines h1 {
transition: transform .5s ease;
}
a#headlines h1:hover {
transform: scale(1.5);
}
<div class="grid_6" style="color: black; text-align: center">
<a href="headlines.html" id="headlines" style="text-decoration: none; color: black">
<h1> Headlines
</h1>
</a>
<hr>
</div>
you can try it
a#headlines:hover {
transition: transform .5s ease;
transform: scale(1.5);
}
Just add this:
a {
font-weight: bold;
font-size: 45px;
transition: all 500ms;
}
a:hover {
font-size:60px;
font-size-adjust: 20px;
}
This is the Fiddle
Related
I'm maybe 2 weeks into coding so apologies if I don't format correctly (code and question itself).I am trying to set a delay for the time it takes the buttons to switch text. Thank you for the help!
I've tried googling this and youtube with no luck.
I have tried adding
transition
transition-delay
body{
background-color: black;
}
.column{
position: fixed;
left:0;
bottom:0;
top:55px;
width:72px;
z-index: 200;
padding-top: 20px;
}
.about,
.skills {
font-size:72px;
width: 10em;
text-align: left;
border:none;
background-color: black;
color:red;
}
.about:hover span {
display: none;
}
.about:hover:after {
transition-delay: 3s;
content: "ABOUT";
}
.skills:hover span {
display: none
}
.skills:hover:after {
content: "SKILLS"
}
<h1>
<div class="column">
<button class="about" data-hover="ABOUT">
<span>
I
</span>
</button>
<button class="skills">
<span>
AM
</span>
</button>
</div>
</h1>
First of all, I would look into the html semantics a bit. Having div tags inside an h1 doesn't make much sense. So consider changing the h1 to a div. Also, the 3s delay is enormous. Think of something a bit faster, like 300ms.
The real issue is that display states and transition don't really work together since it swaps between states like block and none. But there are other solutions to this. You could use position: relative; on a parent div and give the children position: absolute. This way, you could make the transitions with opacity instead.
I have made an example for you so you can get the idea. I have commented on the CSS so you can follow up on what is happening.
/* Lets give our spans some styling: */
span{
font-size: 30px;
font-weight: 600;
font-family: sans-serif;
margin-bottom: 2rem;
max-width: 60ch;
}
/* Lets make the "container" position relative,
this way the absolute children will stay inside the container */
.hover-effect{
position: relative;
}
/* Let's give both of the children position absolute */
.hover-effect span{
position: absolute;
color: black;
opacity: 100%;
transition: 300ms ease-in 300ms; /* Delay: 300ms*/
}
/* Let’s override the previous.
This actually happens when we remove the hover, so we want to
trigger this animation first, hence the delay of 0ms*/
.hover-effect span.on-hover{
opacity: 0%;
transition: 300ms ease-in 0ms;
}
/* When we hover the container, let's change both spans */
.hover-effect:hover span{
color: red;
opacity: 0%;
transition-delay: 0ms;
}
/* Let’s override the previous.
When we hover on the container, the span with the class "on-hover"
becomes visible, and we wait 300ms before it happens so that the
"disappearing" animation gets its time to trigger. */
.hover-effect:hover span.on-hover{
opacity: 100%;
transition-delay: 300ms;
}
<div class="hover-effect">
<span>Try and hover over me</span>
<span class="on-hover">Try and remove the hover</span>
</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 use this hover-effect, where everything but the hovered Element fades out, you can see it in the snippet below.
Its working in Firefox (Version 66.0.3 ) but not in Chrome (Version 73.0.3683.103). I also tried Microsoft Edge, it works there aswell.
I tried adding "-webkit-" because I read, that this could fix the problem, but it didn´t.
Anybody an idea how to achieve this hover-effect in Chrome?
.links{
font-weight: bold;
font-size: 20px;
}
/* Hover Effect */
.hover {
visibility: hidden;
}
.hover > * {
visibility: visible;
transition: opacity 100ms linear 100ms;
}
.hover:hover > * {
opacity: 0.3;
}
.hover > *:hover {
opacity: 1;
transition-delay: 0ms, 0ms;
}
EDIT:
It works in Chrome, if I remove the links (in my case references to other pages of the website).
Working in Chrome:
.links {
font-weight: bold;
font-size: 20px;
}
/* Hover Effect */
.hover {
visibility: hidden;
}
.hover>* {
visibility: visible;
transition: opacity 100ms linear 100ms;
}
.hover:hover>* {
opacity: 0.3;
}
.hover>*:hover {
opacity: 1;
transition-delay: 0ms, 0ms;
}
<div class="links">
<div class="hover">
<div class="linkNav">1</div>
<div class="linkNav">2</div>
<div class="linkNav">3</div>
</div>
</div>
Not Working in Chrome:
.links {
font-weight: bold;
font-size: 20px;
}
/* Hover Effect */
.hover {
visibility: hidden;
}
.hover>* {
visibility: visible;
transition: opacity 100ms linear 100ms;
}
.hover:hover>* {
opacity: 0.3;
}
.hover>*:hover {
opacity: 1;
transition-delay: 0ms, 0ms;
}
<div class="links">
<div class="hover">
<a href="1.html">
<div class="linkNav">1</div>
</a>
<a href="2.html">
<div class="linkNav">2</div>
</a>
<a href="3.html">
<div class="linkNav">3</div>
</a>
</div>
</div>
(N.b. I have updated this answer after noting the problem with the HTML).
I simplified your CSS to try and isolate the problem (I removed the visibility properties that aren't doing anything as well as the > * selectors)
It's unsurprising there is unpredictable behaviour in this case because strictly speaking you shouldn't be putting a block level element such as <div> inside an <a> element.
It seems that, in this case of malformed HTML, Chrome won't recognise the opacity value of the anchor (<a>) tag unless I do something like set it to display: block or display:inline-block. FireFox, Edge and IE do recognise the opacity regardless.
The best solution would be to fix your HTML so that the block level elements wrap the inline elements properly.
.links {
font-weight: bold;
font-size: 20px;
}
.hover:hover a {
opacity: 0.3;
}
.hover a:hover {
opacity: 1;
}
<div class="links hover">
<div class="linkNav">1</div>
<div class="linkNav">2</div>
<div class="linkNav">3</div>
</div>
I would recommend fixing it like this but if for some reason you can't fix the HTM a workaround is to set the display property on your anchor tags. Like so:
.links {
font-weight: bold;
font-size: 20px;
}
.links a {
display:block;
}
.hover:hover a {
opacity: 0.3;
}
.hover a:hover {
opacity: 1;
}
<div class="links hover">
<div class="linkNav">1</div>
<div class="linkNav">2</div>
<div class="linkNav">3</div>
</div>
Or else an alternative solution is you could simply target an alternative element, such as the inner div instead of the a tag.
JSFiddle links for the different workaround solutions and the original CVE that demonstrates the issue (useful for testing in different browsers):
Solution by setting display block
Solution by changing selector to target inner div
Original CVE which works in most browsers but not Chrome
I have corrected the code
the problem here was in the ordering you were adding HTML
The a tag has div inside it and class on that which the selector on hover was unable to reach to.
Now see, it works fine.
This is it I guess.
Hope it solves your problem.
.links {
font-weight: bold;
font-size: 20px;
}
/* Hover Effect */
.hover {
visibility: hidden;
}
.hover>* {
visibility: visible;
transition: opacity 100ms linear 100ms;
}
.hover:hover>* {
opacity: 0.3;
}
.hover>*:hover {
opacity: 1;
transition-delay: 0ms, 0ms;
}
<div class="links">
<div class="hover">
1
2
3
</div>
</div>
Here is the site I'm working on: revistapuerto
It's a Wordpress based site. What I'm trying to achieve through CSS, is to get the excerpt to appear over the picture when you hover over the Title of the post. Right now, the excerpt appears when you hover over the picture only. Want to keep that effect, and add the Title thing.
The picture - excerpt effect I got it from another user here, and here is the CSS in case it helps:
#magia {
position: relative;
}
#magia img {
display: block;
}
#magia .cornerLink {
width:494px;
height:330px;
opacity: 0;
position: absolute;
top: 32px;
left: 0px;
right: 0px;
padding: 0px 0px;
background-color: rgba(0,0,0,0.50);
text-decoration: none;
text-align: center;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
#magia:hover .cornerLink {
opacity: 1.0;
}
Thanks!
Honestly the question isn't very clear, you're gonna need to give more information. All I can really offer in regards to what you've asked is basic fiddle: http://jsfiddle.net/MBLZx/
HTML:
<div class="showhim">HOVER ME
<div class="showme">hai</div>
<div class="ok">ok</div>
</div>
CSS:
.showme{
display: none;
}
.showhim:hover .showme{
display : block;
}
.showhim:hover .ok{
display : none;
}
(also the website won't load for me, could just be my work computer!)
that shows how to use hidden divs to make divs appear using a hover.
More information and I might be able to help you out :)
If I understood what you want, here's how you can achieve it.
#div-for-hover:hover #Div-you-want-to-show {
display: block;
}
The method is simple: The block of CSS code simply says when you hover of #div-for-hover, I'll show #Div-you-want-to-show
Note: The hover could be on a headings, DIVs, images, and more.
Heres where I'm at:
http://codepen.io/qdarkness/pen/FyIJh
Ideally, how I imagine it at least, is when a user hovers over the <a> that the <div>'s "img-holder" and "tag" both have a transition to color, with the "img-holder" showing a "+" in the middle.
I'm suspecting the fact that I have the <img> inside the <div> that it is not working properly, but I am using that div to constrain the img width and height.
I'd prefer not to add additional divs, is this possible by just apply a class, like i attempted to, to the <div>?
HTML:
<li class="b c d">
<a href="" class="link">
<div class="img-holder overlay"><img src="img/test.jpg"></div>
<div class="tag overlay">
<h3>test</h3>
<h4>test</h4>
</div>
</a>
</li>
CSS:
.img-holder {
width: 235px;
height: 195px;
overflow: hidden;
}
.tag {
clear:both;
position:relative;
float:left;
width: 100%;
overflow:hidden;
background-color: #FFF;
text-align: center;
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
a:hover .overlay {
background: #909090;
z-index: 301;
}
OK, I THINK I have an understanding of what you want to do...
I've forked your Codepen sketch: http://cdpn.io/uzfrk
Main points are to position the overlay absolute over your image (relative to .link), and then transition opacity to have it appear.
<old example removed>
UPDATED: fresh sketch with cleaned up markup and styling. Simple example for your purposes.
Codepen sketch here: http://cdpn.io/zhBcA
The main point is the direct child selector to target elements related to your container.
figure:hover > figcaption {
background: #ccc;
}
figure:hover > .overlay {
opacity: 0.85;
}
Let me know if this is what you are looking for.
Could this be what you want? It's just a simple approach.
UPDATE:
Covering text area now.
http://codepen.io/anon/pen/tlKCJ