CSS gradient effect - html

I have a div which has an image as the background and some text over it in an other div. Here is the HTML
.profilePic{
width:190px;
height: 190px;
border-radius: 50%;
background: #FFF;
float: left;
margin:12px;
background: #ededed;
background-image: url("https://www.meggle-pharma.com/images/meggle_icons/company-aktiv-190x190.png");
}
.profilePic:hover{
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
color:#FFF;
}
.name{
font-family: Tahoma;
font-size: 1.5em;
color: red;
margin-top: 42%;
display: none;
}
.profilePic:hover .name {
display:block;
}
<div class='profilePic one'>
<center>
<div class='name'>Name</div>
</center>
</div>
With this code, when I hover on the div named profilePic, the div gets a filter applied on top of it. I dont what the filter on the text, i.e, the div named name but only on the profilePic div. How can I do it?

You need to separate the text from the picture.
Use a container div with a div inside that has the image with background-image.
Use another div inside to display the text
Apply all the effect on container hover
DO NOT use margin-top in percentage but instead, if you want to center the text, add position:relative; to the container and this to the text:
position: absolute; to positioned it.
top: 50%; to place it at 50% of the left
left: 50%; to place it at 50% of the top
transform: translate(-50%, -50%); to pull it at 50% of its width and height to the left and top because when you do left: 50%: for example, it will put the left border of the element at 50% and not the middle of it.
So you need to pull it left a 50% of its proper width to have it horizontally centered according to its parent.
.profilePic{
display: inline-block;
width:190px;
height: 190px;
border-radius: 50%;
background: #FFF;
margin:12px;
background: #ededed;
background-image: url("https://www.meggle-pharma.com/images/meggle_icons/company-aktiv-190x190.png");
}
.profilePicContainer {
position: relative;
display: inline-block;
}
.profilePicContainer:hover .profilePic{
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
color:#FFF;
}
.profilePicContainer:hover .name {
display: block;
}
.name{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: Tahoma;
font-size: 1.5em;
color: red;
display: none;
}
<div class="profilePicContainer one">
<div class="profilePic"></div>
<div class="name">Name</div>
</div>

You can use a pseudo-element as an overlay above the background and below the text and apply CSS on it. Doing this you will only affect the background and not the text.
Here is an example where the overlay will also contain the same background image with the filter applied on it and I simply show it on hover:
.profilePic {
width: 190px;
height: 190px;
border-radius: 50%;
background: #FFF;
float: left;
text-align:center;
margin: 12px;
background: #ededed;
position:relative;
overflow:hidden;
background-image: url("https://www.meggle-pharma.com/images/meggle_icons/company-aktiv-190x190.png");
}
.profilePic:before {
content:"";
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
background-image: url("https://www.meggle-pharma.com/images/meggle_icons/company-aktiv-190x190.png");
transition:0.5s;
filter:grayscale(100%);
opacity:0;
}
.profilePic:hover::before {
opacity:1;
}
.profilePic:hover {
color: #fff
}
.name {
font-family: Tahoma;
font-size: 1.5em;
color: red;
margin-top: 42%;
display: none;
position:relative;
z-index:1;
}
.profilePic:hover .name {
display: block;
}
<div class='profilePic one'>
<div class='name'>Name</div>
</div>
You can also simply use a background color with opacity:
.profilePic {
width: 190px;
height: 190px;
border-radius: 50%;
background: #FFF;
float: left;
text-align:center;
margin: 12px;
background: #ededed;
position:relative;
overflow:hidden;
background-image: url("https://www.meggle-pharma.com/images/meggle_icons/company-aktiv-190x190.png");
}
.profilePic:before {
content:"";
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
transition:0.5s;
}
.profilePic:hover::before {
background:rgba(0,0,0,0.7);
}
.profilePic:hover {
color: #fff
}
.name {
font-family: Tahoma;
font-size: 1.5em;
color: red;
margin-top: 42%;
display: none;
position:relative;
z-index:1;
}
.profilePic:hover .name {
display: block;
}
<div class='profilePic one'>
<div class='name'>Name</div>
</div>

Related

Rounding background image of button

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>

Keeping 3 Floating Divs Center Stacked

I have 3 divs inside of the body, and I need them to stay centered at all times, without overlapping.
I would post the link to the page but it is currently being hosted locally for testing purposes.
body {
background-color: #c8dbdd;
background-image: url("http://www.splashpage.dev/wpcontent/uploads/2016/01/splashbackground.jpg");
background-position: center center;
display:inline-block;
}
#title {
left: 50%;
top: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
margin-top: 80px;
margin-bottom: 20px;
display:block;
position:absolute;
display:inline-block;
}
.carousel {
left: 50%;
top: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
height: 210px;
width: 950px;
background-color: rgba(255, 255, 255, 0.24);
position:fixed;
padding: 10px;
outline: #fff solid thin;
display:table;
clear:both;
display:inline-block;
}
.text {
font-family:'Ubuntu', sans-serif;
color: #ffffff;
font-size: 12px;
text-align:center;
margin-bottom: 3px;
line-height: 25px;
}
.bottom {
font-family:'Ubuntu', sans-serif;
position:fixed;
bottom:20px;
width:100%;
text-align:center;
color: #fff;
font-size:12px;
letter-spacing: 5px;
}
a {
color: #fff;
text-decoration: none;
}
<body>
<div id="title">
<div style="text-align: center"></div>
</div>
<div class="carousel" id="carousel">
<div class="text" id="text"><font size="4px"></div>
</div>
<div id="bottom">
<div class="bottom" style="text-align: center">
THE DESTINATIONS
THE MISSION
CONTACT
CAREERS
</div>
</div>
</body>
I have tried all kinds of position, float, clear, and margin combinations and I can get them centered but I can not keep them from overlapping.
Try the following CSS code. The display:table; line is commented and the height of the .carousel is also increased to height:442px; and the hyperlink text colour is changed to white as the background is black and it doesn't appear.
#import url(//fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);
body {
background-color: #000;
background-image: url("http://www.splashpage.dev/wp-content/uploads/2016/01/splashbackground.jpg");
background-position: center center;
}
#title {
//float: center;
margin-top: 80px;
}
.carousel {
margin: 0 auto;
height: 442px;
width: 950px;
background-color: rgba(255, 255, 255, 0.24);
// position:relative;
padding: 10px;
outline: #fff solid thin;
//display: table;
}
.text {
font-family:'Ubuntu', sans-serif;
color: #000;
font-size: 12px;
text-align:center;
margin-bottom: 3px;
line-height: 25px;
}
.bottom {
font-family:'Ubuntu', sans-serif;
// position:fixed;
bottom:20px;
width:100%;
text-align:center;
color: white;
font-size:12px;
letter-spacing: 5px;
}
a {
color: white;
text-decoration: none;
}

Why I can't set transparent color for text

I have on picture, over her one span.
My span have background color white, and i want to set text transparent.
Like this:
http://justdrop.me/b26e25bf4544a68a4e7b76c73169a4d1.PNG
I tried:
Background-color:white;
color:transparent;
But not working.
HTML:
<div class="col-md-12 picturebee no-padding">
<img class="beepic" src="img/img7.jpg" alt="Picture bee">
<span class="text">Lorem ipsum dolor!</span>
</div>
CSS
.picturebee{
margin-top:50px;
position: relative;
}
.picturebee span{
position: absolute;
top:30px;
font-size:53px;
color:white;
font-family: 'Cuprum', sans-serif;
left: 35%;
transform: translateX(-26%);
text-shadow: 1.4px 1.4px #222;
}
try this css:
.picturebee{
margin-top:50px;
position: relative;
}
.picturebee span{
position: absolute;
top:30px;
font-size:53px;
background-color:white;
font-family: 'Cuprum', sans-serif;
left: 35%;
transform: translateX(-26%);
text-shadow: 1.4px 1.4px #222;
}
.text{opacity: 0.5;}
You can try the
opacity: 0.0; Propriety
Right code :
.picturebee{
margin-top:50px;
position: relative;
}
.picturebee span{
position: absolute;
top:30px;
font-size:53px;
color:white;
font-family: 'Cuprum', sans-serif;
left: 35%;
transform: translateX(-26%);
text-shadow: 1.4px 1.4px #222;
opacity: 0.0;
}
Just set the text-color to transparent will not work!
Explanation: if you use background: white; and color: transparent;, you got a transparent text over a white background. You won't "erase" the background: white;.
To solve your problem, you could add a second span and use background-clip: text; (but this only works in webkit)
For more browser support, you can check this site: https://css-tricks.com/image-under-text/
.picturebee {
margin-top: 50px;
position: relative;
height: 160px;
width: 588px;
background: url(http://justdrop.me/b26e25bf4544a68a4e7b76c73169a4d1.PNG);
}
.picturebee span.box {
background: white;
position: absolute;
top: 20px;
left: 20px;
width: 500px;
height: 60px;
}
.picturebee span.text {
position: absolute;
top: 20px;
background: -30px -20px url(http://justdrop.me/b26e25bf4544a68a4e7b76c73169a4d1.PNG);
font-size: 53px;
color: transparent;
-webkit-background-clip: text;
font-family: 'Cuprum', sans-serif;
left: 30px;
word-wrap: no-break;
}
<div class="col-md-12 picturebee no-padding">
<span class="box"></span>
<span class="text">Lorem ipsum dolor!</span>
</div>
Also you could set the picture as background instead of adding it as an img
If it's an image:
img {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
source: http://www.w3schools.com/css/css_image_transparency.asp

Wrapper size increases after adding the button

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

Overlay with centered/vertically aligned message

I would like to make an overlay on my site to prevent user from clicking somewhere. It's sometimes very handy. In the middle of the overlay I want to place a message like "please wait.." or "loading...".
I've made a div, which covers the whole screen and a span inside of it, which contains the message. I managed to center the span inside the div horizontally, but I'm struggling with the vertical alignment of it. The message should be also vertically centered.
Here is my code so far:
HTML:
<div id="overlay">
<span>Please wait...</span>
</div>
CSS:
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
background-color: #000;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
#overlay span {
padding: 5px;
border-radius: 5px;
color: #000;
background-color: #fff;
}
Here is the jsfiddle.
So, how do I get the span with the message vertically centered?
LIke this
DEMO
add below select in position:relative or top:50%;
CSS
#overlay span {
padding: 5px;
border-radius: 5px;
color: #000;
background-color: #fff;
position:relative;
top:50%;
}
Besides that if the Center object is bigger in height & width, you can give negative margins exactly half of the same.
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
background-color: #000;enter code here
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
#overlay span {
padding: 5px;
border-radius: 5px;
color: #000;
background-color: #fff;
height:100px;
width:100px;
position:absolute;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-50px;
display:block;
}