Switch colours when hovering over an image - html

I have created a html code with css which displays the image 1 below (left image). What I want to accomplish is that when you hover with your mouse over image 1, I want the image 2 (Right picture) to appear (do not mind the difference in sizes).
HTML:
<body>
<div class="borderbox">
<h3 class="header-3">+</h3>
<p class="paragraph-text">visa fler bästsäljare</p>
</div>
</body>
CSS:
.borderbox {
border-style: dashed;
border-width: 2px;
border-color: #d3d3d3;
position: absolute;
height: 362px; !important
width: 241px; !important
top: 0;
left: 0;
margin-right: 5%;
}
h3.header-3 {
font-size: 130px;
text-align: center;
color: #00a0df;
margin: 4px auto 17px;
}
p.paragraph-text {
font-size: 20px;
text-align: center;
color: #00a0df;
text-transform: uppercase;
font-family: inherit; font-weight: bold;
}
How can I implement this to my CSS, when you hover with your mouse over the Image 1 I want it to switch colour (image 2). The colour code for the blue is #00a0df.
URL to my website

Add color: #00a0df; to borderbox and change your text's color to color: inherit. Then on hover you can change the background-color, text color, border color and anything else you want:
.borderbox {
border-style: dashed;
border-width: 2px;
border-color: #d3d3d3;
position: absolute;
height: 362px; !important
width: 241px; !important
top: 0;
left: 0;
margin-right: 5%;
color: #00a0df; //add
}
h3.header-3 {
font-size: 130px;
text-align: center;
color: inherit; //change
margin: 4px auto 17px;
}
p.paragraph-text {
font-size: 20px;
text-align: center;
color: inherit; //change
text-transform: uppercase;
font-family: inherit; font-weight: bold;
}
.borderbox:hover{
background-color: #00a0df;
color: #FFF;
border-color: #FFF;
}
FIDDLE

http://jsfiddle.net/mk7hrs49/3/
In order to get the white border you want when you hover over it.
Just add border color:
.borderbox:hover{
background-color: #00a0df;
color: #FFF;
border-color: white; <---
}
cheers

You can use the CSS :hover pseudo-class, which changes the style when the mouse is hovering over the element. Apply the colors you want (backround and font colors) to the hover attribute which will override the default (non-hovered) style. If you put the font and background color in the .borderbox class, then all you need is to override these in a .borderbox:hover like so:
.borderbox:hover {
background-color: #00a0df;
color: white;
}
The full example follows:
.borderbox {
border-style: dashed;
border-width: 2px;
border-color: #d3d3d3;
color: #00a0df;
position: absolute;
height: 362px; !important
width: 241px; !important
top: 0;
left: 0;
margin-right: 5%;
}
.borderbox:hover {
background-color: #00a0df;
color: white;
}
h3.header-3 {
font-size: 130px;
text-align: center;
margin: 4px auto 17px;
}
p.paragraph-text {
font-size: 20px;
text-align: center;
text-transform: uppercase;
font-family: inherit; font-weight: bold;
}
<body>
<div class="borderbox">
<h3 class="header-3">+</h3>
<p class="paragraph-text">visa fler bästsäljare</p>
</div>
</body>

You should use the :hover Pseudoclass. If this is new to you, check out the explanations on W3Schools. Your code should look like that afterwards:
.borderbox:hover {
#Here comes all your css on hover
background-color: #00a0df;
}
Hope this solves your problem. :-)

Related

CSS style color and more wont load

I'm having a bit of a problem with my CSS code in my website project. I was designing a html form but when i applied the changes in the stylesheet file, the new text colors did not want to be applied etc. And i also added a specific color to this * in the code below but it did not want to change the color either.
.apply {
width: 320px;
height: 420px;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
box-sizing: border-box;
padding: 70px 30px;
}
.apply input[type="text"], [type="text"], [type="email"]
{
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
}
h1 .pageHeader {
margin: 0;
padding: 0 0 20;
text-align: center;
font-size: 22px;
color: #fff;
}
body {
background-color: #24252A;
font-family: "Montserrat", sans-serif;
}
.required {
color: rgb(255,99,71);
}
text in your input will have given color only when this input have some value.
Without value there is displayed placeholder text which have his own styling.
look for ::placeholder pseudo element
input::placeholder {
color: red
}
<input placeholder="Type here...">

How to attach an image into a bottom middle of a div?

I am trying to achieve the following:
And I largely have. The only missing piece is the Svg of the downward arrow. I need it to be in the middle of the div (the green part) irregardless of how wide the div is. I've tried setting .listing-price:after.left to 50% but I don't think it does what it should. I also want the arrow to attach to the bottom of the main div, but I got it there by hardwiring the .listing-price:after.top property.
How do I get the arrow to be in the middle?
Is there a better way of attaching the arrow to the bottom of the div than hardwiring the .top property?
Here is what I have so far:
body {
background-color: salmon;
transform: scale(3.0);
transform-origin: 0 0;
}
.listing-price {
border-radius: 2px;
border-style: solid;
border-width: 1px;
color: white;
cursor: pointer;
display: inline-block;
font-family: "museo_sans_rounded", Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: 500;
line-height: 15px;
padding-left: 5px;
padding-right: 5px;
position: relative;
text-align: center;
user-select: none;
background-color: #009934;
border-color: #F2F5F3;
}
/* Favorite Marker */
.listing-price:before {
content: url(https://rgelb.github.io/public/misc/heart_icon.svg);
display: inline-block;
position: absolute;
right: -7.8px;
top: -6px;
}
/* Downward arrow */
.listing-price:after {
content: url(https://rgelb.github.io/public/misc/arrow_border.svg);
display: inline-block;
position: absolute;
left: 50%;
top: 10px;
}
.listing-price-open-new-house {
background-color: #586371;
border-color: white;
border-radius: 2px;
border-spacing: 1px;
border-style: solid;
border-width: 1px;
color: white;
display: block;
font-family: "museo_sans_rounded", Helvetica, Arial, sans-serif;
font-size: 9px;
font-style: normal;
font-weight: 700;
left: -1px;
line-height: 10px;
position: absolute;
text-align: center;
text-transform: uppercase;
top: -11px;
width: 30px;
}
<div style="height: 25px;margin-top: 40px;">
<div class="listing-price">
<i class="listing-price-open-new-house">Open</i>
$258K
</div>
<div class="listing-price">
<i class="listing-price-open-new-house">Open</i>
$9M
</div>
</div>
You're lucky, it works just by setting left:0;width:100%; for the arrow:
body {
background-color: salmon;
transform: scale(3.0);
transform-origin: 0 0;
}
.listing-price {
border-radius: 2px;
border-style: solid;
border-width: 1px;
color: white;
cursor: pointer;
display: inline-block;
font-family: "museo_sans_rounded", Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: 500;
line-height: 15px;
padding-left: 5px;
padding-right: 5px;
position: relative;
text-align: center;
user-select: none;
background-color: #009934;
border-color: #F2F5F3;
}
/* Favorite Marker */
.listing-price:before {
content: url(https://rgelb.github.io/public/misc/heart_icon.svg);
display: inline-block;
position: absolute;
right: -7.8px;
top: -6px;
}
/* Downward arrow */
.listing-price:after {
content: url(https://rgelb.github.io/public/misc/arrow_border.svg);
display: inline-block;
position: absolute;
top: 8.9px; /* a bit of fine-tuning */
left: 0;
width: 100%;
}
.listing-price-open-new-house {
background-color: #586371;
border-color: white;
border-radius: 2px;
border-spacing: 1px;
border-style: solid;
border-width: 1px;
color: white;
display: block;
font-family: "museo_sans_rounded", Helvetica, Arial, sans-serif;
font-size: 9px;
font-style: normal;
font-weight: 700;
left: -1px;
line-height: 10px;
position: absolute;
text-align: center;
text-transform: uppercase;
top: -11px;
width: 30px;
}
<div style="height: 25px;margin-top: 40px;">
<div class="listing-price">
<i class="listing-price-open-new-house">Open</i>
$258K
</div>
<div class="listing-price">
<i class="listing-price-open-new-house">Open</i>
$9M
</div>
</div>
The reason why this works lies in the nature of SVGs: if the top-level <svg> element contains a viewBox attribute defining the area to draw, and there are a width and height defined for the element where the aspect ratio does not fit that of the viewBox, the viewBox content will be scaled and positioned such that it is fitted at the largest possible size into the middle of the box defined by the svg element.
So, by setting width to the width of the div, you get the positioning in the middle for free - provided the SVG has a viewBox attribute (which it has), and no preserveAspectRatio attribute changing this behavior (which it hasn't).

Fix for uniform button border-radius

http://codepen.io/mochiii/full/NGMXpe/ i have this project my problem is that the border- radius of the buttons are not uniform how do i fix that. I already tried specifying order radius for individual buttons but does not work.
#import url(https://fonts.googleapis.com/css?family=Audiowide);
#import url(https://fonts.googleapis.com/css?family=Righteous);
body{
background-color: #000000;
color: #ffffff;
}
.header{
font-family: 'Righteous', cursive;
}
h1{
border: 3px solid #ffffff;
border-radius: 20px;
width: 50%;
padding: 10px;
}
.countdown-block{
margin-top: 30px;
margin-bottom: 40px;
}
#clock{
border: 50px solid #FF1919;
border-radius: 60px;
padding: 20px;
width: 370px;
margin: 0px auto;
}
#clock>#countdown{
font-size: 60px;
font-family: 'Audiowide', cursive;
}
.breakHeader, .timeHeader{
font-family: 'Righteous', cursive;
}
#break, #time{
font-size: 40px;
font-family: 'Audiowide', cursive;
}
.btn{
font-size: 25px;
font-family: 'Righteous', cursive;
transition: all .3s;
position: absolute;
}
.btn:hover{
font-size: 35px;
}
.btn-group{
position: relative;
height: 35px;
display: block;
}
.btn-group > .btn{
float: none;
}
footer{
margin-top: 80px;
border-top: 2px dashed #ffffff;
}
i wonder what should i do thanks!
The problem is that you use Bootstrap and if you use .btn-group Bootstrap has predefined styles for that (you can see it HERE).
You can either override Bootstrap styles or create your own custom class and apply border-radius to it.
First solution:
CSS:
.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
border-radius: 10px;
}
.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
border-radius: 10px;
}
.btn-group>.btn:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child) {
border-radius: 10px;
}
CODEPEN
Second solution:
HTML:
Add your-border-radius class to every button
<button class="btn btn-success your-border-radius" id="countdownStart">Start</button>
CSS:
.your-border-radius {
border-radius: 10px !important;
}
You have to use !important rule to override Bootstrap styles.
CODEPEN
The issue is with you implementation of bootstrap.min. There is a Button Group that removed border radius. What you can do is overwrite these classes by changing the order of the css class implementation. Then over write the classes for whatever you want.
.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}

Having a sprite image inside a button with text

I'm trying to create a button and here is the demo so far.
Right now I can't figure out how I can position the sprite image so that only the black icon is visible.
Does anyone know how I can fix this?
This is what I want to achieve with the button:
No hover:
Hover:
Here is the code I have:
HTML:
<a class="top-language" href="#" alt="Choose your language">Language</a>
CSS:
.top-language {
border: 1px solid #ddd;
padding: 5px;
text-decoration: none;
color: #000;
position: relative;
font-weight: bold;
font-size: 13px;
padding-right: 10px;
padding-left: 35px;
background: url("http://imageshack.com/a/img853/7081/1u5z.png") no-repeat 0 0;
}
.top-language:hover {
background: url("http://imageshack.com/a/img853/7081/1u5z.png") no-repeat 0 -22;
}
This will work. Here is a jsfiddle
.top-language {
border: 1px solid #ddd;
width: 100px;
color: #202020;
padding-left: 10px;
padding-right: 10px;
display: block;
font-weight: bold;
font-size: 13px;
width: 80px;
margin: 0;
line-height: 22px;
text-align: right;
text-decoration: none;
background: url("http://imageshack.com/a/img853/7081/1u5z.png") no-repeat top left ;
}
.top-language:hover {
background-position: bottom left;
color: #d13030;
}
You can either:
a. reduce the height of the button;
b. increase the vertical gap between the two sprites in the image itself;
c. background: url(...) no-repeat 0 2px; adjust the value to push out the red icon
.top-language {
display: block;
width: 22px;
height: 22px;
font-size: 13px;
background: url('http://imageshack.com/a/img853/7081/1u5z.png') bottom;
text-indent: -99999px;
}
.top-language:hover {
background-position: 0 0;
}
You can provide image display position as follows:
display:inline-block

CSS Hover Text Changing Color With Button

So, it's pretty easy to set a hover over effect for an element. But what I want is when the user hovers over a button that has text in it, to make the button turn from black to white and the text from white black at the same time. Instead of two separate elements. How should I do this?
Thanks!
#signUpBox {
width: 150px;
height: 47px;
border-style: solid;
border-width: 1px;
margin: auto;
margin-top: 25px;
border-radius: 2px;
}
#signUpBox:hover {
background-color: #ffffff;
}
h3 {
text-align: center;
margin-top: -35px;
letter-spacing: 1px;
font-size: 17px;
}
I'm not sure how you have the code set up but this would work on a div with an onclick function attached as a button:
#signUpBox {
width: 150px;
height: 47px;
border: solid 1px #000;
margin: auto;
margin-top: 25px;
border-radius: 2px;
color:#000;
background:#fff;
}
#signUpBox:hover {
background: #000;
color:#fff;
}
HTML:
<div id="signUpBox">This is a test</div>
DEMO
#signUpBox:hover {
background-color: #ffffff;
color:#000000;
}
you can do
#signUpBox:hover h3 {
color: #000;
}
JSFIDDLE
change text color using color property on hover.
#signUpBox:hover {
background-color: black;
color: white;
}
Here is a demo.
#signUpBox {
width: 150px;
height: 47px;
border-style: solid;
border-width: 1px;
margin: auto;
margin-top: 25px;
border-radius: 2px;
background: #000000;
color: #FFFFFF;
}
#signUpBox:hover {
background: #ffffff;
color: #000000;
cursor: pointer;
}
Fiddle