I've got to design a menu bar which has two actions for it's links
1) Before action where the icon is green
2) On hover the icon should change to it's active version
On changing to active version, I need the text to display too. Like this:
My current HTML for this is:
<div class="span1 but">
<a href="#">
<div class="image-holder" id="about">
</div>
<div class="text-menu" id="about-text">
About
</div>
</a>
</div>
Where span1 is from Bootstrap while but is the css class as follows:
.but{
height:70px;
}
the ID #about is defined as:
#about{
background:url('../img/about-green.png') no-repeat;
background-size: 60px 60px;
}
#about:hover{
background:url('../img/about-active.png') no-repeat;
background-size: 60px 60px;
}
My current problem is such that on hover, I want the text to appear too. The text-box for this is defined as:
.text-menu{
text-align: center;
margin-top: -10px;
text-decoration: none;
color: rgba(255,255,255,0);
}
And the ID #about-text is:
#about-text:hover{
color: rgba(0,0,0,1);
}
What should I do to make the text appear along with the image on hover?
Try the following.
#about-text{
display: none;
}
#about:hover #about-text{
display: block;
}
This uses display:none; to hide the text but it shows the text if you hover on #about.
You can also try this.
.text-menu{
display: none;
}
.image-holder:hover .text-menu{
display: block;
You can use visibilityproperty
.text-menu{
visibility:hidden
}
.text-menu:hover{
visibility:visible
}
You have to change your HTML first in order to solve your problem.
<div class="image-holder" id="about">
<div class="text-menu" id="about-text">
About
</div>
</div>
Now add css as below instead of "#about-text:hover"
#about:hover #about-text{
color: rgba(0,0,0,1);
}
This will solve your problem.
Related
I dont know what title to give for this question. Got from my designer this image:
How can i make something like this?
Like you see there is button in midle who needs to be clickable and background transparent. Around button you see red full width parent. Maybe my approach is not good maybe it can be done with pseudo elements but i dont know how.
Pls help me...
This is my html code:
<div class="pdf">
<div class="pdf-container">
<h3>Rádi byste s námi spolupracovali? Představíme Vám své další výrobky v našem katalogu.</h3>
stáhnout katalog
</div>
</div>
Support isn't fantastic, but mix-blend-mode is the easiest way to achieve your desired look.
.pdf {
background: url('https://media.istockphoto.com/vectors/gear-wheel-vector-rendering-of-3d-wireframe-style-3d-view-layers-of-vector-id1003526726') 50% 10% no-repeat;
text-align: center;
}
.nav {
height: 60px;
background-color: #313131;
mix-blend-mode: multiply;
}
.pdf-container {
padding: 30px;
background-color: red;
mix-blend-mode: multiply;
}
.pdfbutton{
background: white;
border-radius: 20px;
display: inline-block;
padding: 10px 20px;;
}
<div class="pdf">
<div class="nav"></div>
<div class="pdf-container">
<h3>Rádi byste s námi spolupracovali? Představíme Vám své další výrobky v našem katalogu.</h3>
stáhnout katalog
</div>
</div>
Hey guys I am trying to make a page which is having six buttons. I want the caption under the image will slide in on mouse over event.I am using animate.css for this.
My problem is when I use <hr> tag my hover effect is not working. If I removed this Its working properly but I want to use both together.
I also tried <div> tag and border-top property of css but any element whichever I used in-between the caption and image will cause stop working hover effect.
I tried to change the size of image and increasing the padding but it is not working. Is there any idea that how to do it?
This is my html code:
<div class="btn-row">
<a href="domainSearch.html">
<div class="box-btn">
<img src="style/img/university.jpg" class="img"><hr class="caption-border">
<div class="caption animated slideInUp"> Institution</div>
</div>
</a>
</div>
This is my css:
.caption{
display: none;
text-align: center;
font-size: 1.5em;
color: $txt-lightgrey;
position: absolute;
margin: -10px 0px 0px -75px;
}
.img:hover + .caption{
display: inline;
}
Here is the example
Can anybody help me out?
Thanks in Advance!!
There is no .caption directly after .img.
Use ~ instead of +.
.img:hover ~ .caption {
display: inline;
}
https://jsfiddle.net/hwunxuy5/1/
I'm trying to center a bordered READ MORE link on a web page, but haven't succeeded yet. The link still sits on the left of the page:
I'm using Twitter Boostrap and that's how the HTML looks like:
<div class="container">
<h2 class="more">read more</h2>
</div> <!--end container-->
And the CSS:
#process .more {
border: 1px solid #392e2e;
padding: 15px;
display: inline-block;
margin: 0 auto;
}
#process .more a {
color: #392e2e;
text-decoration: none;
text-align: center;
}
I've also tried it with Bootstrap's class="text-center", but that doesn't work either. Here's a link to my project, you can see the READ MORE link issue at the very bottom of the page.
Thank you for your help.
Use the text-center class but use it on the parent div container for the link:
<div class="container text-center">
<h2 class="text-center more">read more</h2>
</div>
You can do it two ways:
1. Block display method:
#process .more a {
color: #392e2e;
text-decoration: none;
display:block;
width:100px; //Adjustable and depends on you
margin:0 auto;
}
or:
2. Outer element align:
h2.more {
display:block;
text-align:center;
}
h2.more a {
display:inline-block;
width:auto;
}
Here is the fiddle with 2 examples: Example
There are actually other ways to do it with CSS, but these two are the most common.
I have looked around and cannot find an answer for this, maybe I am just making my code too convoluted.
I have a div that is making up my menu links. The wrapper div will be a link that contains a div for my CCS Circle and a span for my link text:
<div class="menu-item">
<a href="#">
<div class="menu-circle"></div>
<span class="menu-text">Home</span>
</a>
</div>
I am trying to make it so that when I hover ANYWHERE over the wrapper div it changes the color of the shape AND link. So far I have only been able to manage individual hovers on the shape OR the link.
my CSS is:
.menu-circle {
width: 60px;
height: 60px;
background: black;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
margin:auto;
}
.menu-text{
font-family: 'Oswald', sans-serif;
font-weight:700;
letter-spacing: .07em;
}
.menu-circle:hover{
background:#e7e7e7;
}
.menu-text:hover{
color:#e7e7e7;
}
.menu-item{
text-align:center;
}
you can see the example here
If you want to change the colors when you hover ANYWHERE on the wrapper div then you must call the hover state on the wrapper dive. Like this:
mean-item:hover .menu-circle {change colors here}
This however would only change the circle when hovering anywhere in the wrapper div (the wrapper being menu-item) So you would need a second hover state for menu-text
mean-item:hover .menu-text {change colors here}
See here for working example:
http://jsfiddle.net/s6jkja5r/
Add this code to your style
menu-circle:hover ~ .menu-text{
color:#e7e7e7;
}
DEMO
Try this in your css:
.menu-item:hover div, .menu-item:hover span {
background:#e7e7e7;
color:#e7e7e7;
}
It was a minor CSS change.
.menu-item:hover .menu-circle {
background-color: #f4f;
}
.menu-item:hover .menu-text {
color: #f4f;
}
This fiddle should do exactly what you're trying to achieve:
http://jsfiddle.net/9qg3vjm3/10/
Check this fiddle
This changed css will change the background color of the circle div and the text color only while hovering on the circle div..
CSS
.menu-item:hover .menu-circle{
background:#e7e7e7;
}
.menu-item:hover .menu-text{
color:#e7e7e7;
}
HTML
<div class="menu-item">
<a href="#">
<div class="menu-circle"></div>
<span class="menu-text">Home</span>
</a>
</div>
I'm trying to do a menu.
http://jsfiddle.net/yagogonzalez/pVcQG/
I want the image and the text hightlighted at the same time. When the mouse is over the image, the text is highlighted, but when the mouse is over the text, the image doesn't change.
By the way, I'm not able to remove the image border with border-style: none;.
I hope anyone can help me. Thanks a lot!
<div class="iniciocenter">
<div class="bloqueinicio">
<a href="?page_id=7">
<img class="imghover2" style="background-image: url('http://www.aprendicesvisuales.com/wp-content/themes/twentytwelve/images/inicio/nosotrosh.png');">nosotros
</a>
</div>
<div class="bloqueinicio">
<a href="?page_id=8">
<img class="imghover2" style="background-image: url('http://www.aprendicesvisuales.com/wp-content/themes/twentytwelve/images/inicio/cuentosh.png');">cuentos
</a>
</div>
</div>
Style
.iniciocenter {
text-align: center;
}
.imghover2 {
width:190px;
height:190px;
}
.imghover2:hover {
background-position:0px -190px;
}
.handlee{
font-family: handlee;
font-size: 24px;
font-size: 1.714rem;
line-height: 1.285714286;
margin-bottom: 14px;
margin-bottom: 1rem;
}
.bloqueinicio {
display:inline-block;
text-align: center;
font-family: handlee;
font-size: 22px;
font-size: 1.971rem;
color: #365F8B;
width:190px;
height:50px;
}
.bloqueinicio a {
text-decoration: none;
color: #375F8F;
}
.bloqueinicio a:hover {
color: #FF8000;
}
Add the below to the CSS to get the image highlighted on hovering the text.
.bloqueinicio a:hover .imghover2{
background-position:0px -190px;
}
Demo Fiddle
EDIT: The border appears when the img tag is used without a src attribute (as kind of a placeholder for the image). Here you are placing the image as a background. Hence, my suggestion would be to use an empty div tag instead of the img tag like shown below to do away with that border.
<div class="bloqueinicio">
<a href="?page_id=7">
<div class="imghover2" style="background-image: url('http://www.aprendicesvisuales.com/wp-content/themes/twentytwelve/images/inicio/nosotrosh.png');">
</div>
nosotros
</a>
</div>
Demo Fiddle 2
Additional Info: You might want to have a look at this SO thread also prior to implementing the suggestion mentioned in the edit. Basically it says as per HTML 4.01, block level elements weren't allowed inside <a>. But with HTML5, it is perfectly valid.
Change your HOVER rules like this:
.bloqueinicio:hover .imghover2 {
background-position:0px -190px;
}
...
.bloqueinicio:hover a {
color: #FF8000;
}
See the following fiddle: http://jsfiddle.net/H7DFA/
edit .imghover2:hover class like this :
.bloqueinicio a:hover img {
background-position:0px -190px;
}
http://jsfiddle.net/mohsen4887/pVcQG/5/