How to make border of the button semi-transparent when positioning it on top of the image like so?
In CSS
.button { border: 5px solid rgba(2,4,233, 0.1); }
rgba() <- put your color, the last parameter is the opacity
Please update code codepen
.button {
width: 218px;
height: 57px;
background: #1abc9c;
position: absolute;
left: 50%;
top: 50%;
margin: -28px -109px;
line-height: 57px;
text-align: center;
color: #fff;
text-decoration: none;
font-size: 23px;
text-transform: uppercase;
border: 7px solid rgba(120,216,197,.5);
background-clip: padding-box;
display: none;
}
.image-holder{
display: inline-block;
vertical-align: top;
position: relative;
}
.image-holder img{
vertical-align: top;
}
.image-holder:hover .button{
display: block;
}
<div class="image-holder">
Go Ahead
<img src="http://lorempixel.com/400/200/city" alt="" />
</div>
Related
I want to make a line between two circles, for that, I have used the below code by using pseudo-element CSS. I would like to make the line between these two circles responsive, now it's intersecting with circle in some other devices like mobile, etc. How to make it responsive or any other solution that does the same design? Please help.
.cart_header_tab {
display: flex;
margin-top: 35px;
}
.cart_header_tab > div {
text-align: center;
margin-right: 100px;
cursor: pointer;
}
.cart_header_tab h6 {
color:#02b5f9;
font-weight: 400;
}
.cart_header_tab div:last-child h6 {
color:#ccc
}
span.circle_one::after {
content: "";
width: 152px;
height: 1px;
background: #eee;
position: absolute;
top: 6px;
left: 14px;
}
.cart_header_tab span.circle_one {
border: 1px solid #2fe4ba;
}
.cart_header_tab span {
display: inline-block;
width: 16px;
height: 16px;
border: 1px solid #ccc;
border-radius: 100%;
position: relative;
}
<div class="cart_header_tab">
<div>
<span class="circle_one"></span>
<h6>Order Details</h6>
</div>
<div>
<span class="circle_two"></span>
<h6>Freight Options</h6>
</div>
</div>
You can start tweaking the code something like this:
Be aware that if you wanted to change the size or width of the circle you have to tweak the other property in the css, hope that is not an issue here.
#cart_header_tab {
position: relative;
display: inline-block;
}
#cart_header_tab::after {
content: "";
position: absolute;
width: 50%;
z-index: -1;
top: 20%;
left: 25%;
border: 1px solid gray;
/* line between circles */
}
#cart_header_tab div {
display: inline-block;
font-size: 12px;
text-align: center;
min-width: 150px;
}
#cart_header_tab span {
color: white;
background: white;
display: block;
height: 15px;
margin: 0 auto 10px;
padding-top: 20px;
width: 30px;
border-radius: 50%;
border: 1px solid #22A7F2;
}
<div id="cart_header_tab">
<div><span class="circle_one"></span>
<h6>Order Details</h6>
</div>
<div><span class="circle_two"></span>
<h6>Freight Options</h6>
</div>
</div>
Using flex i insert that line between circle as separator itself is a child of flex and hen using margin adjust that according to circles
.cart_header_tab {
display: flex;
margin-top: 35px;
}
.cart_header_tab>div {
text-align: center;
cursor: pointer;
}
.cart_header_tab h6 {
color: #02b5f9;
font-weight: 400;
}
.cart_header_tab div:last-child h6 {
color: #ccc
}
.cart_header_tab {
position: relative
}
.sep {
width: 100%;
height: 1px;
background: #eee;
margin: 9px -21px 0;
}
.cart_header_tab span.circle_one {
border: 1px solid #2fe4ba;
background: #fff;
z-index: 1;
}
.circle_two {
background: #fff;
z-index: 1;
}
.cart_header_tab span {
display: inline-block;
width: 16px;
height: 16px;
border: 1px solid #ccc;
border-radius: 100%;
position: relative;
}
<div class="cart_header_tab">
<div>
<span class="circle_one"></span>
<h6>Order Details</h6>
</div>
<div class="sep"></div>
<div>
<span class="circle_two"></span>
<h6>Freight Options</h6>
</div>
</div>
I have a text in the middle of the div block with a font size 80px. When I hover on the div block, it will change the border size from 1px to 5px with a blue color but the text will moves down.
.calendar-content {
width: 81%;
display: block;
padding: 0;
background: #fff;
float: left;
position: relative;
margin-bottom: 150px;
}
.calendarday-container {
width: 139px;
height: 139px;
float: left;
position: relative;
margin-top: -1px;
margin-left: -1px;
border: 1px solid #ccc;
}
.calendarday-add .calendarday-number {
display: inline-block;
width: 100%;
font-size: 80px;
color: #f1f1f1;
margin: 12px 0px;
text-align: center;
}
.calendarday-number:hover {
margin: 12px 2px;
}
.calendarday-container:hover {
border: 5px solid #2e7ad1;
}
.add-day-ico {
display: none;
width: 21px;
height: 21px;
margin: 22px 0px;
float: right;
}
.calendarday-container:hover .add-day-ico {
display: block;
margin: 22px 0px;
}
<div class="calendarday-container" data-day="0" data-dropable="true">
<a href="/autoresponder/create_day.php?day=0" data-action="click" class="calendarday-add">
<span class="calendarday-number">0</span>
<img src="http://www.clker.com/cliparts/u/F/K/J/M/A/add-button-md.png" sytle="height: 21px; width: 21px;" align="right" style="margin-top: 3px;" class="add-day-ico">
</a>
</div>
Jsfiddle: http://jsfiddle.net/f0k6r9nb/
I have tried to change the margin in the calendarday-container:hover .add-day-ico but it didn't help to resolve the issue.
Can you please show me an example how I can stop the text moving down on hover?
Thank you.
Changing the width of the border from 1px to 5px and recalculating the inner parts is not a practical solution. You could use an additional element, which has 5px of transparent border and change it to 5px of colored border on hover.
Another simple solution would be to use outline instead, as it doesn't add to the elements dimensions:
.calendar-content {
width: 81%;
display: block;
padding: 0;
background: #fff;
float: left;
position: relative;
margin-bottom: 150px;
}
.calendarday-container {
width: 139px;
height: 139px;
float: left;
position: relative;
margin-top: -1px;
margin-left: -1px;
border: 1px solid #ccc;
}
.calendarday-container:hover {
outline: 5px solid #2e7ad1;
}
.calendarday-add .calendarday-number {
display: inline-block;
width: 100%;
font-size: 80px;
color: #f1f1f1;
margin: 12px 0px;
text-align: center;
}
.add-day-ico {
opacity: 0;
width: 21px;
height: 21px;
position: absolute;
bottom: 0;
right: 0;
}
.calendarday-container:hover img {
opacity: 1;
}
<div class="calendarday-container" data-day="0" data-dropable="true">
<a href="/autoresponder/create_day.php?day=0" data-action="click" class="calendarday-add">
<span class="calendarday-number">0</span>
<img src="http://www.clker.com/cliparts/u/F/K/J/M/A/add-button-md.png" class="add-day-ico">
</a>
</div>
A typical approach to showing a border on hover is to have the non-hover state be transparent or a color that matches the background along with the width matching that of the border when hovered.
In this case, there's an existing 1px border. Here, I would change the gray border blue, then use an inset box-shadow to add the additional 4px of the border.
Note: I also removed some margin for .calendarday-number on hover so the number does not shift.
.calendar-content {
width: 81%;
display: block;
padding: 0;
background: #fff;
float: left;
position: relative;
margin-bottom: 150px;
}
.calendarday-container {
width: 139px;
height: 139px;
float: left;
position: relative;
margin-top: -1px;
margin-left: -1px;
border: 1px solid #ccc;
}
.calendarday-add .calendarday-number {
display: inline-block;
width: 100%;
font-size: 80px;
color: #f1f1f1;
margin: 12px 0px;
text-align: center;
}
/*
.calendarday-number:hover {
margin: 12px 2px;
}
*/
.calendarday-container:hover {
border-color: #2e7ad1;
box-shadow: inset 0 0 0 4px #2e7ad1;
}
.add-day-ico {
display: none;
width: 21px;
height: 21px;
margin: 22px 0px;
float: right;
}
.calendarday-container:hover .add-day-ico {
display: block;
margin: 22px 0px;
}
<div class="calendarday-container" data-day="0" data-dropable="true">
<a href="/autoresponder/create_day.php?day=0" data-action="click" class="calendarday-add">
<span class="calendarday-number">0</span>
<img src="http://www.clker.com/cliparts/u/F/K/J/M/A/add-button-md.png" sytle="height: 21px; width: 21px;" align="right" style="margin-top: 3px;" class="add-day-ico">
</a>
</div>
Add this:
.calendarday-container {
border: 5px solid transparent;
outline: 1px solid #ccc;
outline: none;
}
.calendarday-container:hover {
outline: none;
}
Remove this:
.calendarday-number:hover {
margin: 12px 2px;
}
You can use a pseudo element like this. I also removed lot of unnecessary css that was fighting each other
* { margin: 0; padding: 0; box-sizing: border-box; }
body { margin: 5%; }
/* Normal */
.calendarday-container {
width: 150px; height: 150px;
position: relative;
display: flex; align-items: center; justify-content: center;
}
.calendarday-container:after {
content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid #ccc; z-index: -1;
}
.caldndarday-add { text-decoration: none; }
.calendarday-number { font-size: 80px; color: #ccc; }
.add-day-ico { width: 24px; height: 24px; position: absolute; bottom: -8px; right: -8px; }
/* Hover FX */
.calendarday-container:hover:after { border: 10px solid navy; }
.calendarday-container:hover .calendarday-number { color: navy; }
<div class="calendarday-container" data-day="0" data-dropable="true">
<a class="caldndarday-add" href="/autoresponder/create_day.php?day=0" data-action="click">
<span class="calendarday-number">0</span>
<img class="add-day-ico" src="http://www.clker.com/cliparts/u/F/K/J/M/A/add-button-md.png">
</a>
</div>
The text was moving down because, There was increase in border-width from 1px to 5px while hover.
You can either maintain a outline around the box using outline property, and keeping the border: 5px solid transparent to border: 5px solid #2e7ad1 while hovering.
I've created a working fiddle for you, for better understanding: Link to Jsfiddle
I want to make a circle <div>, like this image:
I have tried this code.
.discussion:after {
content: '\2807';
font-size: 1em;
background: #2d3446;
width: 20px;
height: 20px;
border-radius: 100px;
color:white;
}
<div class="discussion"></div>
How can I do this correctly?
You could just use :after pseudo-element with content: '•••' and transform: rotate. Note that this is the bullet HTML special character •, or \u2022.
div {
position: relative;
background: #3F3C53;
width: 50px;
height: 50px;
color: white;
border-radius: 50%;
box-shadow: 0px 0px 15px 1px #4185BC;
margin: 50px;
}
div:after {
content: '•••';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(90deg);
font-size: 15px;
letter-spacing: 4px;
margin-top: 2px;
}
<div></div>
Improving on Nenad Vracar's answer, here's one that doesn't use text (so it's font-independent) and everything is centered nicely:
div {
position: relative;
background: #3F3C53;
width: 50px;
height: 50px;
border-radius: 50%;
box-shadow: 0px 0px 15px 1px #4185BC;
margin: 50px;
}
div:after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 2px;
height: 2px;
margin-left: -1px;
margin-top: -1px;
background-color: white;
border-radius: 50%;
box-shadow: 0 0 0 2px white, 0 11px 0 2px white, 0 -11px 0 2px white;
}
<div></div>
Yet another answer, same as others except:
it uses the vertical ellipsis character (U+22EE)
text-align and line-height to center the content
does not use any pixel value
.discussion:after {
content: "\22EE";
/* box model */
display: inline-block;
width: 1em;
height: 1em;
/* decoration */
color: #FFFFFF;
background-color: #000000;
border-radius: 50%;
/* center align */
line-height: 1;
text-align: center;
}
<div class="discussion"></div>
<div class="discussion" style="font-size: 2em;"></div>
<div class="discussion" style="font-size: 3em;"></div>
<div class="discussion" style="font-size: 4em;"></div>
Note that U+2807 is actually a Braille pattern and the dots are not supposed to be centered.
Use this code.
.discussion {
width: 20px;
height: 20px;
border-radius: 50%;
position: relative;
background: #2d3446;
}
.discussion:after {
content: '\22EE';
font-size: 1em;
font-weight: 800;
color: white;
position: absolute;
left: 7px;
top: 1px;
}
<div class="discussion"></div>
Hope this helps!
I hope this is what you wanted! Otherwise feel free to ask.
.discussion{
display: block; /* needed to make width and height work */
background: #2d3446;
width: 25px;
height: 25px;
border-radius: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.discussion:after {
content: '\2807';
font-size: 1em;
color: white;
margin-left: 15%;
}
<div class="discussion"></div>
Using text dots
.discussion{
width:50px;
height:50px;
text-align:center;
background-color:black;
border: 2px solid red;
border-radius: 100%;
}
.discussion text{
writing-mode: tb-rl;
margin-top:0.4em;
margin-left:0.45em;
font-weight:bold;
font-size:2em;
color:white;
}
<div class="discussion"><text>...</text></div>
.discussion:after {
content: '\2807';
font-size: 1em;
display: inline-block;
text-align: center;
background: #2d3446;
width: 20px;
height: 20px;
border-radius: 50%;
color: white;
padding:3px;
}
<div class="discussion"></div>
I have deleted (i found how to do it) all my post, the following code works for 3 vertical dot into a black circle
.discussion:after{
display:inline-block;
content:'\22EE';
line-height:100%;
border-radius: 50%;
margin-left:10px;
/********/
font-size: 1em;
background: #2d3446;
width: 20px;
height: 20px;
color:white;
}
<div class="discussion"></div>
I am having trouble vertically aligning the 's text inside a div.
This is what I have. I need to center "Next" inside the blue box:
#import url(http://fonts.googleapis.com/css?family=Muli);
/*Makes the little side arrow*/
.open {
position: fixed;
width: 100px;
height: 40px;
left: 50%;
top: -1000px;
margin-left: -80px;
margin-top: -30px;
border: 1px solid #ccc;
background-color: #fff;
border-radius: 6px;
padding: 10px 30px;
color: #444;
transition: all ease-out 0.6s;
}
.open:hover {
border: 1px solid #aaa;
box-shadow: 0 0 8px #ccc inset;
transition: all ease-out 0.6s;
}
.tutorial-box {
position: fixed;
width: 400px;
height: 238px;
top: 75px;
background-color: #F3F3F3;
border-radius: 6px;
box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.4);
}
.slider-turn p, .tutorial-box h1{
margin-left: 10px;
}
.tutorial-box:before {
content: '';
position: absolute;
left: -14px;
top: 28px;
border-style: solid;
border-width: 10px 14px 10px 0;
border-color: rgba(0, 0, 0, 0) #f3f3f3 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
.tutorial-box p {
width: 350px;
font-size: 16px;
color: #a8aab2;
font-weight: 400;
line-height: 28px;
float: left;
margin: 0;
}
.tutorial-box .bottom {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
width: 100%;
bottom: 0;
position: absolute;
}
.tutorial-box .bottom .btn-2 {
flex: 3;
-webkit-flex: 3;
-ms-flex: 3;
width: 100%;
height: 54px;
background-color: #373942;
border-bottom-left-radius: 6px;
display: flex;
}
.tutorial-box .bottom span {
flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
line-height: 54px;
color: #fff;
margin-left: 25px;
font-size: 18px;
}
.next {
text-decoration: none;
display: inline-block;
vertical-align: middle;
text-align: center;
flex: 1;
background-color: #6cb5f3;
border: 0;
margin: 0;
padding: 0;
text-transform: uppercase;
color: #fff;
font-weight: bold;
border-bottom-right-radius: 6px;
cursor: pointer;
transition: all .3s;
}
.next:hover {
text-decoration: none;
background-color: #6BA5D6;
transition: all .3s;
}
.next:active {
text-decoration: none;
background-color: #5F8AAF;
}
.slider-tutorial-box {
width: 350px;
margin: 0 25px;
overflow: hidden;
}
.slider-turn {
width: 10000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- TUTORIAL -->
<div class="tutorial-box">
<h1>Welcome</h1>
<span class="close"></span>
<div class="slider-container">
<div class="slider-turn">
<p>
Here, under the Company tab, is where you will do most of the company managment.<br>
</p>
</div>
</div>
<div class="bottom">
<div class="btn-2">
<span>Step 2/?</span>
</div>
Next
</div>
</div>
Please let me know how I can center the text vertically to the center of the div.
Thank you very much. Let me know if I wasn't clear enough.
Seems like you already did that for .tutorial-box .bottom span so, do the same thing for .next
.next{
line-height: 54px;
}
the simplest and possibly most easy way would be to add the 'center' and '/center' tag before and after the text you want, and after each letter use '/br' to move to the next line. this will add some bulk, but would be considerably easier than other methods.
<center>
'letter'</br>'next letter'</br>'next letter'</br>
</center>
repeating the letter and break for all letters
alternatively, you could also add "div" tags around the "a" tag. you would have to modify the 'height' and 'width' to make it vertical for you. I would use px for this and not '%' or 'em'. add this to them:
<div style="height: /* modify this */100px; width: /* and this*/20px;">
Next
</div>
this may not be AS compatible cross platform though.
Like this:
.next {
position: relative;
top: 50%;
transform: translateY(-50%);
}
A nice trick that works both vertically and horizontally.
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