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.
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 working on a project of mine and I've got a relatively interesting idea that would look pretty nice, only issue is, I can't really figure out how to pull it off.
here's the deal. I've got my navigation bar set up and it looks something like this
Now for illustration purposes i've margined the small arrow under it. As in now, it's only a lone <img> placed under the navbar and margin applied to it to make it look like it's under it.
Basically what I'm trying to accomplish is, whenever you hover over a certain part of the navigation bar, the arrow will move under it. For sake of simplicity and readability of this post, let's not discuss any animations and smoothness, literally all I want is for the arrow to disappear from the original position and re-appear under the desired (hovered-over) location.
Any suggestions what would be the best (and easiest) way to pull this off?
Ideally I'd prefer usage of HTML/CSS only.
Probably only solution I came to so far is creating a separate arrow for each item inside the navigation bar.
Set it to
.nav img {
display: inline-block;
visbility: hidden;
}
And then create
.nav img:hover {
visiblity: visible;
}
Now there's multiple issues with this.
1) This would mean, people would need to hover on the arrows under it, intead of the actual navbar items for them to appear.
2) I would need to manually margin each and every arrow for them to fit under every single menu item.
3) While this would work on my screen, if you switch to any different resolution, the margin would be off for them.
I'm interested to hear, if you guys have any suggestions.
EDIT: I actually figured out a solution, that I can simply create a dropdown menu (another ul) and just put image there. Though if you still have any more intuitive and better working solutions, I'll be happy to view them.
If I understand your question correctly you can achieve this by doing the following without any images. I have added the class of active and given this a unique color to show what page you are currently viewing and then the hover effect will follow in a different color. The selector will be a psuedo element with pure css triangle and will show on hover.
Here is a fiddle to show you this in action Fiddle
And the markup:
<nav>
<ul>
<li><a class="active" href="#">Link</a></li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
and the css like this:
nav{
text-align: center;
background: #000;
}
nav ul{
list-style-type: none;
padding: 0;
margin:0;
}
nav li{
display:inline-block;
position: relative
}
nav li a{
color: #fff;
padding: 10px;
display: inline-block;
text-decoration: none;
}
nav li a:before{
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid rgba(200,200,200,1);
position: absolute;
bottom:-20px;
left:0;right: 0;
margin: 0 auto;
content:'';
opacity: 0;
-ms-transition: opacity 300ms ease-in-out;
-moz-transition: opacity 300ms ease-in-out;
-webkit-transition: opacity 300ms ease-in-out;
-o-transition: opacity 300ms ease-in-out;
transition: opacity 300ms ease-in-out;
}
nav li a.active:before{
opacity: 1;
border-top: 20px solid red;
}
nav li a:hover:before{
opacity: 1;
}
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
I have been trying to design a login form and the button requires a little transition effect. There is one complexity though.
Background: I originally copied this idea from here: original form.
Notice how there is no padding (left and right) on the main container, now in my demo it was critical to have padding left and this creates a problem (will explain further).
Now here's my demo:
My version of login form (don't be scared of the 108 lines of CSS code; I'll paste the code that pertains to my problem below).
So the code that's relevant to this problem is as follows.
The HTML code:
<button class="login-button"><span>SEND</span></button>
The CSS code:
.login-button{
width: 100%;
outline: none;
border:none;
cursor: pointer;
padding: 0;
margin:0;
transition:.3s;
}
.login-input , .login-button{
height: 50px;
line-height: 40px;
transition:.3s;
}
.login-button span{
display: block;
background:red;
height: 100%;
width: 100%;
left: 0;
transition:.3s;
position: relative;
}
.login-button span:before{
content: 'ok';
position: absolute;
left: 100%;
display: block;
}
.login-button:hover span:before{
content: 'OK To go now';
position: absolute;
/*left: 0%;*/
text-align: center;
display: block;
width: 100%;
height: 100%;
}
Now if I go to the CSS styling for the main container:
I.E.
.main-login{
min-width: 200px;
max-width: 400px;
background: #533e69;
margin: 100px auto;
text-align: center;
overflow: hidden;
box-shadow: 1px 1px 10px rgba(0,0,0,.2);
padding: 0 20px;
}
and take off the padding, then the problem is solved and the transition looks perfect.
The problem
My requirements are such that I need that padding, so now what happens is when you hover over the button and the span element moves left:-100%, it's still visible in the main container.
Proposed solution
I would like it if this problem can be solved in CSS only as I don't really like cluttering my doc's with JS. So how about this.
I am new to CSS, so my solution may be less elegant:
When hovered over the button, the span overs left:-100% and than if the span can be set to display:none. Sounds simple, but my limited knowledge of CSS has got me stuck here.
You need to set the background to be transparent. It's not possible for a transition to animate the display property.
Add this css code, and it should work:
.login-button:hover span{
-webkit-transition-delay: 1s; /* Safari */
transition-delay: 1s;
transition: 2s;
background: rgba(1,1,1,0);
}
See your updated fiddle here.
Edit: I cleaned up the css a bit:
.login-button:hover span{
transition: 0.3s;
background: transparent;
}
Fiddle is here.
Transition properties are comma delimited in all browsers that support transitions:
.nav a {
-webkit-transition: color .2s, text-shadow .2s;
/* And so on... */
}
Ease is the default, so you don't have to specify it. If you really want linear, you will need to specify it, i.e. -webkit-transition: color .2s linear, text-shadow .2s linear;
Or try this
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
This is the link
Update I implemented the CSS Reset and to no avail. The answer by Kejko also did not help and instead made it worse. (Chrome now displays it incorrect with the change in styles)
This may be the problem since I know actual tables can not be positioned relative?
.chatIcons {
display: table;
}
End Update
I was about to have my site go live after I tested how each page looked on the major browsers and ran into a problem. The problem seems to be involved with the hover effect of the icons.
In chrome the icon section appears exactly how I want it to.
In FireFox it appears the same but once one it is hovered it only effects the third icon and the .iconInfo's overlay from staying relative to the parent, instead it is doing 100% width and height of the main parent container.
In IE 10-11 it keeps everything correct but once it is hovered the "overlay" is not 100% height anymore and the height actually varies.
Here is the css pertaining to the hover:
.iconInfo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
text-align: center;
opacity: 0;
transition: opacity 0.6s ease;
-webkit-transition: opacity 0.6s ease;
-moz-transition: opacity 0.6s ease;
}
.icon:hover .iconInfo {
opacity: 1;
}
I have included a fiddle to help, Demo
Try this:
.icon {
border-radius: 5px;
display: inline-block;
padding: 15px 0;
position: relative;
vertical-align: middle;
width: 32.99%;
}
That should fix your problem.