I have an image wrapper in which i want to show a button on mouse hover with a black background. I tried to do it but it added a white space to the container at the bottom, i dont know why.
HTML:
<div class="tour-box-wrapper" style="margin-right:45px">
<div class="image-wrapper">
<img src="http://static.teambuy.ca/deal/540x254/other/28165573-2014-03-03-28144457-boxhouse-10b.jpg" />
<a><button type="button" class="view-deal-button" >View Deal</button></a>
</div>
</div>
CSS:
.tour-box-wrapper
{
width:45%;
border: 1px solid #BBB;
padding:2px;
background-color: #E7E7E7;
background-image: -webkit-gradient(linear,left top,left bottom,from(#FFFFFF),to(#E7E7E7));
background-image: -webkit-linear-gradient(top,#FFFFFF,#E7E7E7);
background-image: -moz-linear-gradient(top,#FFFFFF,#E7E7E7);
background-image: -ms-linear-gradient(top,#FFFFFF,#E7E7E7);
background-image: -o-linear-gradient(top,#FFFFFF,#E7E7E7);
background-image: linear-gradient(to bottom,#FFFFFF,#E7E7E7);
float:left;
display:block;
}
.image-wrapper
{
border:1px solid #E0E0E0;
padding:2px;
display: block;
}
.image-wrapper img
{
width:100%;
}
a.grayscale {
display: inline-block;
background: black;
padding: 0;
}
a.grayscale img {
display: block;
}
a.grayscale:hover img
{
opacity: 0.5;
}
.view-deal-button
{
border: none;
text-align: center;
border-radius: 6px;
text-align: center;
z-index: 999;
position: relative;
left: 343px;
bottom: 36px;
background-color: #CD277B;
padding:6px;
}
.view-deal-button a
{
color:white;
font-size:14px;
}
Note ignore the Javascript which i know will be used to display button on mouse enter but i just want to fix this extra space below the image and want to bring the button to the bottom right corner of the image.
JSFiddle
Your button having a position of 'relative' is what's creating the space that the bottom. It's 'mass' is affecting its parent container. If you don't want it having any 'mass', try positioning it 'absolute' relative to the parent.
This happens because of the relative positioning and the bottom property.
.view-deal-button {
background-color: #CD277B;
border: medium none;
border-radius: 6px;
bottom: 36px;
left: 343px;
padding: 6px;
position: relative;
text-align: center;
z-index: 999;
}
Moving the button right and under the image.
.view-deal-button {
border: none;
border-radius: 6px;
text-align: center;
float: right;
margin: 5px 0;
background-color: #CD277B;
padding:6px;
}
http://jsfiddle.net/b4r3p/3/
Try this css for button
.view-deal-button
{
border: none;
text-align: center;
border-radius: 6px;
text-align: center;
z-index: 999;
position: relative;
left: 343px;
bottom: 36px;
background-color: #CD277B;
padding:6px;
margin: 0% 0% 0% -80%;
}
check this fiddle
Related
I'm required to have a rounded "growing" effect upon hovering over a button.
Please see this link for a reference of how I need the button to work.
http://demo1.wpopal.com/corpec/home-4/
Currently I have achieved the "Not this" effect upon hover; though my employer wants the effect to have that bit of rounding.
I used the following css on the "not this" button to achieve the growing effect, though i need the edges to be rounded.
.Custom-Button a {
position: relative;
display: inline-block;
padding: 15px 70px;
border: 1px solid #fdc900 !important;
color: white;
font-size: 30px;
font-family: arial;
background-image: linear-gradient(#fdc900, #fdc900);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 0% 100%;
transition: background-size .5s, color .5s;
}
.Custom-Button a:hover {
background-size: 100% 100%;
color: black;
}
<div class="Custom-Button">
BUTTON
</div>
I'm only allowed to use CSS to achieve the following effect and have already spent a day trying to get this to work.
applying pseudo element for button solve it ! hope this help!
.Custom-Button{
position: relative;
display: inline-block;
padding: 15px 70px;
border: 1px solid #fdc900 !important;
color: white;
font-size: 30px;
font-family: arial;
border-radius:50px;
position:relative;
}
.Custom-Button a{
z-index:99;
text-decoration:none;
transition:color 1s;
}
.Custom-Button:hover:after{
width:100%;
}
.Custom-Button:hover a{
color:black;
}
.Custom-Button:after{
width:0%;
transition: width 1s;
height:100%;
z-index:-1;
content:"";
position:absolute;
border-radius:50px;
top:0;
left:50%;
transform:translateX(-50%);
background-image: linear-gradient(#fdc900, #fdc900);
}
<div class="Custom-Button">
BUTTON
</div>
You can achieve this effect, by combining z-index, and transitions of position and width of an underlying element:
When hovering, the child of the filler, will transition from
position: absolute; left: 50%;
to
position: absolute; left: 0;
while also resizing from width: 0; to width: 100%;
This is what will give you the desired effekt of "growing from the middle"
also you need to apply a border radius to your growing element
a {
position: relative;
display: inline-block;
padding: 15px 70px;
border: 1px solid #fdc900 !important;
color: black;
font-size: 30px;
font-family: arial;
border-radius: 32px;
}
.text {
position: relative;
z-index: 2000;
}
.filler {
position: absolute;
z-index: 1000;
top: 0;
left: 50%;
width: 0;
height: 100%;
border-radius: 32px;
/* half of <a> height */
background-color: #fdc900;
transition: width .5s, color .5s, left .5s;
}
a:hover .filler {
z-index: 500;
width: 100%;
left: 0;
color: black;
}
a:hover .text {
color: white;
}
<a href="#">
<div class="text">
BUTTON
</div>
<div class="filler">
</div>
</a>
I tried to insert into my site a border-radius. It should look like:
I use Font Awesome and Bootstrap (in Fiddle I can’t insert it). This is how I tried to do that: http://jsfiddle.net/24oehpeh/
This is the code:
.ikonka:hover{
border: 2px solid;
border-radius:100%;
}
<div class="ikonka">f</div>
What did I do wrong?
You need to set a width on your element. As it stands, the content f is wrapped in a div, which is a block level element. This will occupy maximum horizontal space available.
.ikonka {
border: #fff 2px solid;
border-radius: 50%;
height: 20px;
text-align: center;
width: 20px;
}
.ikonka:hover {
border-color: #000;
}
<div class="ikonka">f</div>
I choosed to use the pseudo element "before" for this solution.
It gives you the benefit like "a second element", where you can more freely style it without making to many tricks with the main element.
Updated, has a perfectly round circle now.. :)
.ikonka {
position: relative;
border: 2px solid transparent;
display: inline-block;
/*padding: 4px 10px; removed */
background-color: black;
color: white;
width: 24px; /* added */
height: 24px; /* added */
line-height: 24px; /* added */
text-align: center; /* added */
}
.ikonka:hover:before {
border: 2px solid white;
border-radius:100%;
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
<div class="ikonka">f</div>
The div must not be set to auto-width (which would be 100%).
The border should be transparent, so there are two pixels of invisible border.
A border radius of 50% suffices since it bends half of each side.
To make it look like your example, some font styling is necessary.
Result:
body{ background-color:#2C2F34; }
.ikonka{
width:32px;
height:32px;
border: 2px solid transparent;
border-radius:50%;
color:white;
cursor:default;
text-align:center;
font-weight:bold;
font-size:26px;
font-family:sans-serif;
}
.ikonka:hover{ border-color:white; }
<div class="ikonka">f</div>
Try this.
.ikonka:hover{
border: 2px solid white;
border-radius:100%;
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.ikonka {
width: 100px;
height: 72px;
text-align: center;
background-color: black;
font-size: 51px;
color: white;
vertical-align: middle;
position: relative;
display: inline-block;
padding: 16px 8px;
}
<div class="ikonka">f</div>
I have a some text on image, but the problem is i am using opacity so that text gets highlighted but it makes images look very dull.
Here is Updated Fiddle Link
Html
<div class="subcontainer">
<img src="http://i58.tinypic.com/11kbnlf.png" alt="">
<h3 class="header3">Motivate Yourself</h3>
</div>
CSS
.subcontainer {
width: 100%;
height: 100%;
float: left;
position: relative;
border: 3px solid white;
}
.imgcolumn {
background-repeat: no-repeat;
float: left;
width: 60%;
height: 80%;
margin-left: 130px;
margin-top: 45px;
position: absolute;
opacity: 0.4;
filter: alpha(opacity=40);
}
.header3 {
z-index: 100;
position: absolute;
float:right;
color: black;
font-size: 25px;
margin-top: 175px;
text-align: center;
margin-left: 170px;
}
Is there any other way i can highlight text by keeping image as it is.
Note : I am trying to achieve something like this PAGE and i don't see image being blurred or having opacity.
use this fiddle
eg:
.header3 {
z-index: 100;
position: absolute;
float:right;
color: black;
font-size: 25px;
text-align: center;
position:absolute;
width:80%;
height:45%;
background-color:rgba(0,0,0,0.4);
top:20px;
left:24px;
line-height:150px;
}
You could also set the background-image of the parent container then lay another element over top of it with a semi-transparent background color as I have done here. Then, the highlight can be controlled via the opacity of the BACKGROUND of the overlay layer without affecting the text opacity.
http://jsfiddle.net/xDaevax/8Mzh9/
.subcontainer {
border: 3px solid white;
margin: 0px auto;
background: url("http://i61.tinypic.com/2ur6rk1.png") no-repeat center top;
height: 225px;
}
.imgcolumn {
width: 60%;
display: table;
height: 100%;
margin: 0px auto;
border: solid 1px #000000;
background-color: rgba(255, 255, 255, .6);
}
.header3 {
color: black;
font-size: 25px;
text-align: center;
position: relative;
top: -120px;
}
HTML
<div class="subcontainer">
<h3 class="header3">Motivate Yourself</h3>
</div>
The page you gave as an example uses contrasting colors for text and image. For example, that page uses dark images and the text on them is pure white.
If you want the text to stand out, use contrasting colors, or else use a contrasting drop shadow/outer glow (made with image editing software like PhotoShop), or add a semi-transparent background like this: http://jsfiddle.net/P22Cg/
.header3 {
z-index: 100;
position: absolute;
float:right;
color: black;
font-size: 25px;
margin-top: 175px;
text-align: center;
margin-left: 170px;
background-color: rgba(255, 255, 255, 0.5); /* I added this... */
padding: 5px; /* ... and this */
}
i am try to dsiplay span text over the image when mouse hover the div.
i am try this.
html
<div id="some-div">
<a href="#"><img class='round_border type_border' src='http://www.jewsnews.co.il/wp-content/uploads/2013/08/Donald_Duck.gif'/>
<span id="some-element">Dounald
</span></a>
</div>
css look like this
<style>
#some-div{
position:relative
}
#some-element {
width:100px;
height:100px;
border: 1px solid orange;
display: none;
font-size: 10px;
bottom: 0px;
left: 0px;
right: 0px;
text-align: center;
text-transform: uppercase;
position: absolute;
top:0;
left:0;
background:rgba(255,79,50,.5);
color:Black !important;
margin-top:2px;
border:1px solid gray;
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
border-radius: 500px;
}
#some-div:hover #some-element {
display: block;
position: relative;
cursor: pointer;
color:#FFFFFF;
}
a{
position: relative;
}
.type_border {
width: 100px;
height: 100px;
background: white;
position: absolute;
}
.round_border {
float: left;
border:1px solid gray;
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
border-radius: 500px;
background: white;
}
</style>
Add position: absolute to span and position:relative to main div
#some-div{
position:relative
}
#some-element {
width:80px;
border: 1px solid #ccc;
display: none;
font-size: 10px;
bottom: 0px;
left: 0px;
right: 0px;
text-align: center;
text-transform: uppercase;
position: absolute;
top:0;
left:0
}
DEMO
Use Title.
<img class='img' title='Donald Duck' src='http://www.jewsnews.co.il/wp-content/uploads/2013/08/Donald_Duck.gif'/>
If you want text to be displayed on mouse hover image.
You can simply do it by using title attribute of html image element
For ex:
You will be able to see that text when mouse hoveered.
Hope this helps..
Unfortunately as far as i know you cannot insert text on the image.
Workaround for this is to have span in a div which is having background image can work
#some-div{
background-image:url('http://www.jewsnews.co.il/wp-content/uploads/2013/08/Donald_Duck.gif');
background-repeat:no-repeat;
}
check this link http://jsfiddle.net/sy6MG/
I have an audio player that i built with jquery. The markup and css is relatively simple but I cannot get the progress bar to change width with the width of the whole container.
It is set as a percentage but does not behave as a child of the container div. I am guessing it is something to do with the position being absolute but if i change that the whole thing goes wrong.
Here is the markup
<div class="container gradient">
<div style="width:100px; overflow:hidden; display:inline-block;"><img src="" class="artwork" height="100%"></div>
<div class="name">
<p1><br>
<b></b></p1>
</div>
<div class="logo" style="font-size:12px; text-align:right; font-weight:bold;">
<br>
<br>
</div>
<div class="player gradient">
<a class="controls gradient" id="play" href="" title=""></a>
<input type="range" id="seek" value="0" max=""/>
</div><!-- / player -->
</div><!-- / Container-->
And the css
.gradient {
border: 1px solid #C4C4C4;
background: #F2F2F2;
}
.container {
position: absolute;
width: 100%;
height: 122px;
top: 0%;
left: 0%;
padding: 10px;
.artwork {height:100px; overflow:hidden; margin-left:auto; margin-right:auto;}
.containerLarge {
height: 427px;
}
.name {left:120px; position:absolute; top:7px}
.player {
box-sizing: border-box;
position:absolute;
width:91%;
bottom: 10px;
left:120px;
border-radius: 3px;
padding: 5px;
}
.controls {
border-radius:1em;
background-color:#0485bf;
display: block;
width: 34px;
height: 34px;
background-image: url(../player/src/images/sprite.png);
background-repeat: no-repeat;
float: left;
margin-right: 5px;
}
.controls:hover {background-color:#005b85}
#play {
background-position: 6px 5px;
}
#pause {
background-position: -32px 5px;
}
input[type="range"] {
width: 250px;
margin-top: -5px;
}
#close {
float: right;
background-position: -146px 5px;
display: none;
}
.volume {
position: absolute;
height: 100px;
width: 34px;
border: 1px solid black;
background-color: #242323;
top: -97px;
display: none;
}
input{
display:none\9!important;
}
input[type="range"] {
border: 1px solid #C4C4C4;
position: absolute;
top: 18px;
display: block;
width: 95%;
height: 15px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
background-color: #DBDBDB;
left: 50px;
}
input::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
border:1px solid #C4C4C4;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #0485bf;
}
input::-webkit-slider-thumb: hover {opacity : 0.3;filter: alpha(opacity=30)}
.logo {float:right; }
.embed {width:100%; background-color:black }
The main elements in question are .container, .controls, .player and the input type range.
Hard to see what's going on from the markup. Which element is the progress bar? If something is positioned absolutely and set to 100% width, it will fill fill the width of the screen, rather than its parent element (unless it's parent is set to position:relative).