First of all, I'm running Meteor with neo64:Bootstrap and a custom theme.
I've got a button which shows like this after I make an arbitrary change in my css and it hotpushes the new code:
Then after a page reload the button looks like this:
Both times chrome shows this as the computed values:
-webkit-box-shadow: rgba(0, 0, 0, 0.227451) 0px 6px 10px 0px, rgba(0, 0, 0, 0.188235) 0px 10px 30px 0px;
-webkit-font-smoothing: antialiased;
-webkit-transform: matrix(1, 0, 0, 1, 0, 0);
background-color: rgb(255, 152, 0);
border-bottom-left-radius: 100%;
border-bottom-right-radius: 100%;
border-top-left-radius: 100%;
border-top-right-radius: 100%;
bottom: -28px;
box-shadow: rgba(0, 0, 0, 0.227451) 0px 6px 10px 0px, rgba(0, 0, 0, 0.188235) 0px 10px 30px 0px;
box-sizing: border-box;
color: rgb(255, 255, 255);
cursor: pointer;
display: inline-block;
font-family: FontAwesome;
font-size: 32px;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 56px;
line-height: 32px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
padding-top: 15px;
position: relative;
text-align: center;
text-rendering: auto;
transform: matrix(1, 0, 0, 1, 0, 0);
width: 41.140625px;
This is the code that makes up the button:
// BUTTONS
.fab {
margin: 0;
padding: 15px;
width: 56px;
height: 56px;
border-radius: 100%;
cursor: pointer;
transform: none;
& {
.shadow-z-3();
}
&:hover {
.shadow-z-4();
background-color: lighten(#brand-primary, 40%);
}
&:active {
.shadow-z-5();
}
&.fab-mini {
width: 40px;
height: 40px;
padding: 13px;
font-size: 15px;
}
&.fab-bottom {
position: relative;
bottom: -28px;
}
&.inverse {
background-color: #brand-primary;
color: #white;
&:hover {
background-color: lighten(#brand-primary, 10%);
}
}
i {
position: relative;
top: -5px;
}
}
The plus is a Font Awesome fa-plus.
These are the classes for my button (in Jade):
i.fa.fa-fw.fa-2x.fa-plus.fab.inverse.fab-bottom(data-toggle="modal"
data-target="#createModal" data-backdrop="static" data-keyboard="false")
Added the Jade of the page:
.row
.col-sm-6
.panel.panel-default
.panel-heading
h2.panel-title {{_ "dataA"}}
.list-group
.list-group-item
+each availableShifts
+availableShiftCard
.col-sm-6
.panel.panel-default
.panel-heading
h2.panel-title {{_ "dataB"}}
.list-group
.list-group-item
+each ownShifts
+ownShiftCard
.text-center
i.fa.fa-fw.fa-2x.fa-plus.fab.inverse.fab-bottom(data-toggle="modal"
data-target="#createModal" data-backdrop="static" data-keyboard="false")
What am I doing wrong?
Related
I want to make a text effect with shadow behind letter, like this:
This is my code:
span {
font-family: Calibri;
font-size: 110pt;
text-shadow: -14pt 18pt 4pt rgba(0,0,0,0.5);
}
<span>Text</span>
but this it simple text shadow, I need to transform it. How can I create this effect using CSS and only one HTML tag like <span>?
Thanks for help.
You can do this using a psuedo element instead of a shadow:
[data-shadowtext] {
position: relative;
font-size: 150px;
}
[data-shadowtext]::before,
[data-shadowtext]::after {
content: attr(data-shadowtext);
}
[data-shadowtext]::before {
position: absolute;
z-index: 0;
top: -60px;
left: 3px;
font-size: 1.2em;
/* the text is 20% larger than the parent */
color: transparent;
/* hide the text */
text-shadow: 0 0 25px black;
/* create a shadow only from the blur */
transform-origin: bottom;
transform: rotateX(75deg) skew(15deg);
letter-spacing: -15px;
}
[data-shadowtext]::after {
position: relative;
z-index: 1;
}
body {
margin: 20px 0 0 80px;
}
<div data-shadowtext="Text"></div>
This is not possible with writing core CSS.
You can only use as generated by Text Shadow.
You can use translate method and its matrix property.:
My JS Fiddle Example : https://jsfiddle.net/gsmjjm7b/
HTML:
<div id="relative">
<h1 id="title">TEXT</h1>
<h1 class="shadow">TEXT</h1>
</div>
CSS :
#relative{position:relative;margin:100px}
h1 {font-size:80px;margin:0}
h1.shadow {
position:absolute;
top:0;
left:-25px;
-ms-transform: matrix(1, 0, 0.7, 1, 0, 0); /* IE 9 */
-webkit-transform: matrix(1, 0, 0.7, 1, 0, 0); /* Safari */
transform: matrix(1, 0, 0.7, 1, 0, 0);
text-shadow:2px 2px 4px rgba(0,0,0,0.6);
opacity:1;color:rgba(0,0,0,0)
}
Another way of displaying,
span {
color: black;
position: relative;
font-family: Calibri;
font-size: 110pt;
}
span:before {
bottom: 2px;
color: rgba(0, 0, 0, 0.1);
content: attr(title);
left: 9px;
position: absolute;
text-shadow: 0 0 20px grey;
transform-origin: bottom;
transform: skew(30deg) scale(0.8, 1);
z-index: -1;
}
<span title="Text">Text</span>
It's not exactly the same but you can get the idea !!
span {
display: inline-block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
position: relative;
padding: 20px;
border: none;
font: normal 100px/1 "Oswald", Helvetica, sans-serif;
color: #e74c3c;
text-align: center;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
letter-spacing: 15px;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2) ;
}
span:after {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
z-index: -1;
position: absolute;
content: "Text";
top: 34px;
left: 28px;
padding: 20px;
border: none;
font: normal 77px/1 "Oswald", Helvetica, sans-serif;
color: rgba(255,255,255,0.2);
text-align: center;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
letter-spacing: 23px;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2) ;
-webkit-transform: rotateX(50deg) skewX(-30deg);
transform: rotateX(50deg) skewX(-30deg);
}
<span title="Text">Text</span>
I've got several class names and they are all 99% identical - except the background image. The classname always matches the image filename:
Example (see .icon_hero_rank-19):
.brawler .rank.icon_hero_rank-19 {
background-image: url("/images/ranks/icon_hero_rank-19.png");
position: absolute;
top: 85%;
left: 0;
width: 40px;
height: 45px;
line-height: 45px;
background-size: contain;
display: inline-block;
text-align: center;
font-weight: normal;
vertical-align: middle;
font-family: "BrawlStarsDeputy";
color: white;
font-size: 1.5rem;
text-shadow: 0px 3px 2px rgba(0, 0, 0, 0.8);
letter-spacing: 1px;
z-index: 10;
}
The question:
So is there a way to reuse the class name as variable in my CSS or what do you recommend?
One can use predefined variable names for the selectors and for the CSS properties like this:
$icon-list: (
icon_hero_rank-00,
icon_hero_rank-19
);
#each $icon in $icon-list {
.brawler .rank.#{$icon}{
background-image: url("/images/ranks/#{$icon}.png");
position: absolute;
top: 85%;
left: 0;
width: 40px;
height: 45px;
line-height: 45px;
background-size: contain;
display: inline-block;
text-align: center;
font-weight: normal;
vertical-align: middle;
font-family: "BrawlStarsDeputy";
color: white;
font-size: 1.5rem;
text-shadow: 0px 3px 2px rgba(0, 0, 0, 0.8);
letter-spacing: 1px;
z-index: 10;
}
}
Sure, you can use for loop
Take a look at this
$string-template: "icon_hero_rank-";
$start: 0;
#for $i from 1 through 8 {
.brawler .rank.#{$string-template}#{$i+$start} {
background-image: url("/images/ranks/#{$string-template}#{$i+$start}.png");
position: absolute;
top: 85%;
left: 0;
width: 40px;
height: 45px;
line-height: 45px;
background-size: contain;
display: inline-block;
text-align: center;
font-weight: normal;
vertical-align: middle;
font-family: "BrawlStarsDeputy";
color: white;
font-size: 1.5rem;
text-shadow: 0px 3px 2px rgba(0, 0, 0, 0.8);
letter-spacing: 1px;
z-index: 10;
}
}
Building on the answer your already posted, kentor, you could considerably condense your compiled CSS by using attribute selectors to set all the shared styles only one time and then set the background image in the #each function.
.brawler div[class*="icon_hero_"].rank {
position: absolute;
top: 85%;
left: 0;
width: 40px;
height: 45px;
line-height: 45px;
background-size: contain;
display: inline-block;
text-align: center;
font-weight: normal;
vertical-align: middle;
font-family: "BrawlStarsDeputy";
color: white;
font-size: 1.5rem;
text-shadow: 0px 3px 2px rgba(0, 0, 0, 0.8);
letter-spacing: 1px;
z-index: 10;
}
$icon-list: (
rank-00,
rank-19
);
#each $icon in $icon-list {
.brawler div[class$="#{$icon}"].rank{
background-image: url("/images/ranks/#{$icon}.png");
}
}
That way, you don't end up with the shared styles repeated a bunch of times in your stylesheet.
Please refer to this image as a visual aid for my question.
I want the text input with "Sindre", the other input, and the buttons, to be placed higher, so they vertically align with the Icehotel logo. How can I do this?
Here's my code...
HTML
<div id="header-content">
<br>
<a href="/index">
<img draggable="false" src="{url}/app/tpl/skins/{skin}/images/logo.gif" style="position:relative; margin-left: 20px; <div align=; color: #FA0000;margin-top: 15px;margin-left: 180px">
</a>
<input id="username" name="log_username" placeholder="Username" style="position:relative; margin-left: 20px;padding:5px;box-shadow:3px 3px 5px black;border: 0;width:250px;background: #3b8ba4;border-radius: 6px;color: #baedf5;" type="text">
<input id="password" name="log_password" placeholder="Password" style="position:relative;margin-left: 1px;padding:5px;box-shadow:3px 3px 5px black;border: 0;width:250px;background: #3b8ba4;border-radius: 6px;color: #baedf5;" type="password">
<a href="{url}/api.php">
<button class="login green" name="login" style="height:34px;" type="submit">Let's go!</button>
</a>
<a>
<button class="login red" style="height:34px; margin-left: 4px" type="sumbit">Forgot your password?</button>
</a>
</div>
CSS
pre, blockquote {
border: 1px solid #999;
page-break-inside: avoid
}
thead {
display: table-header-group
}
tr, img {
page-break-inside: avoid
}
img {
max-width: 100%!important
}
#page {
margin: .5cm
}
p, h2, h3 {
orphans: 3;
widows: 3
}
h2, h3 {
page-break-after: avoid
}
}
html {
height: 100%
}
body {
height: 100%;
margin: 0;
padding: 0;
color: #e0eff5;
background-attachment: fixed;
background-color: #013448;
background-image: url('http://localhost/app/tpl/skins/aura/habboweb/planet.png');
background-image: url('http://localhost/app/tpl/skins/aura/habboweb/planet.png'), -webkit-radial-gradient(190px 190px, circle farthest-side, #0297c8 0, #013448 480px);
background-image: url('http://localhost/app/tpl/skins/aura/habboweb/planet.png'), -moz-radial-gradient(190px 190px, circle farthest-side, #0297c8 0, #2D3877 480px);
, -ms-radial-gradient(190px 190px, circle farthest-side, #0297c8 0, #013448 480px);
, radial-gradient(circle farthest-side at 190px 190px, #0297c8 0, #013448 480px);
min-height: 755px
}
i, cite, em, var, address, dfn {
font-style: italic;
}
body {
font-family: "Ubuntu Condensed", Arial, serif;
font-weight: normal;
min-height: 0;
}
#footer a {
color: #a1b5c8;
text-decoration: none;
font-size: 13px;
}
body {
font-size: 1em;
line-height: 1.4;
}
.form__input, .form__select {
box-shadow: inset 0 2px 0 0 #9ebecc;
line-height: 1.2;
padding: 5px 12px;
width: 100%;
font-size: 16px;
}
.button b, .new-button i {
position: absolute;
display: block;
left: 2px;
top: 3px;
right: 2px;
height: 9px;
background-color: #4a9fb4;
z-index: 0
}
.button:hover, .new-button:hover {
background-color: #418491
}
.button:hover b, .new-button:hover i {
background-color: #46a9bf
}
.button span, .new-button b {
position: relative;
z-index: 100
}
.button:active, .button-active, .new-button:active {
left: 1px;
top: 1px;
box-shadow: 2px 2px rgba(0, 0, 0, 0.4)
}
.button.dimmed {
-ms-filter: "alpha(opacity=50)";
filter: alpha(opacity=50);
-moz-opacity: .5;
opacity: .50
}
.button.large {
height: 100px;
background-color: #c78800;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #5f4416
}
.button.large:hover {
background-color: #d99b00
}
.button.large:hover b {
background-color: #f7ce00
}
.button.large b {
left: 4px;
top: 4px;
right: 4px;
height: 48px;
background-color: #f0bb00;
-webkit-border-radius: 2px 2px 0 0;
-moz-border-radius: 2px 2px 0 0;
border-radius: 2px 2px 0 0
}
.button.large span {
display: block;
font-size: 27px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
line-height: 54px
}
.button.large span.sub {
display: block;
font-size: 17px;
font-weight: bold;
line-height: 42px;
text-transform: none
}
.button.large.not-so-large {
height: 48px
}
.button.large.not-so-large b {
height: 20px
}
.button.large.not-so-large span {
text-transform: none;
font-size: 22px;
line-height: 46px
}
header, footer {
width: 100%;
background: #101016;
background: rgba(16, 16, 22, 0.85);
position: fixed;
z-index: 999
}
#login-errors {
width: 100%;
height: 35px;
background-color: #c00;
color: #fff;
font-size: 17px;
font-weight: bold;
text-align: center;
line-height: 35px
}
#login-errors a {
color: #000
}
#footer-content {
float: left;
margin-left: 50px
}
#footer-content.partner-logo-present {
margin-left: 20px
}
#footer {
width: 100%;
min-width: 780px;
margin-top: 19px
}
header {
top: 0;
min-height: 99px
}
header #border-left {
position: absolute;
width: 500px;
height: 1px;
left: 0;
bottom: 0;
border-bottom: 1px solid #7aa3b9
}
header #border-right {
position: absolute;
width: 100%;
height: 1px;
left: 220px;
bottom: 0;
border-bottom: 1px solid #7aa3b9
}
footer {
height: 69px;
bottom: 0;
border-top: 1px solid #7aa3b9
}
#top-bar-triangle, #top-bar-triangle-border {
position: absolute;
left: 163px;
bottom: -29px
}
#top-bar-triangle {
font-size: 0;
height: 0;
line-height: 0;
border-style: solid;
float: left;
margin: 0;
border-color: #101016 transparent;
border-color: rgba(16, 16, 22, 0.85) transparent;
border-width: 29px 29px 0 29px
}
#top-bar-triangle-border {
background-image: url('http://localhost/images/new_index/images/v3/top_bar_arrow_border.out.png');
width: 58px;
height: 29px
}
header #habbo-logo {
position: absolute;
width: 190px;
height: 52px;
background-image: url('http://localhost/app/tpl/skins/aura/images/logo.png');
left: 32px;
top: 27px
}
#login-form-container {
position: relative
}
header form {
position: relative;
left: 239px;
top: 0;
width: 740px;
height: 99px
}
#login-columns {
position: relative
}
header form.captcha {
height: 200px
}
header form.captcha #login-recaptcha {
height: 103px;
margin-top: 8px
}
#login-recaptcha .field-error, #login-recaptcha #captcha-overlay {
display: none
}
#login-column-1 {
position: absolute;
left: 0;
top: 11px;
width: 205px;
height: 70px
}
#login-column-2 {
position: absolute;
left: 214px;
top: 11px;
width: 134px;
height: 70px
}
#login-column-3 {
position: absolute;
left: 358px;
top: 32px;
width: 205px;
height: 55px
}
Set vertical-align: middle; on the inputs and remove the margin-top from the inline styles in the logo <img> tag.
While I'm at this, though...General cleanup of this code is probably a good idea. I would like to caution you to avoid mixing inline styles and CSS. Also, the <br> tag should probably be replaced with padding - that line break and the inline styles are there only for design purposes and design is handled in CSS. Keeping as much design out of the HTML will help you (or someone else) easily make changes to this site later, if needed. The <img> tag's styles also include two margin-left values. I would remove one to avoid confusion. Lastly, I think you will want to remove <div align=; from the <img> tag's styles. As far as I know, this doesn't accomplish anything.
Hope that helps!
I am trying to work on the following example for a user profile.
I have a problem with the text on my various fields though. I would like them to be centered horizontally and vertically.
Using
vertical-align: middle;
Did not work for me, or I did something wrong.
How can I make it so each text snippet is perfectly centered on its respective container?
Here's the solution:
/* --------------------------------
Primary style
-------------------------------- */
#font-face {
font-family: 'Roboto';
src: url('../fonts/roboto/Roboto-Regular.ttf');
font-weight: normal;
font-style: normal;
}
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
div {
display: block;
}
html,
body {
background: #f1f1f1;
font-family: 'Roboto', sans-serif;
padding: 1em;
}
h1 {
text-align: center;
color: #a8a8a8;
font-size: 200%;
}
.user-data {
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
position: relative;
overflow: hidden;
cursor: pointer;
display: table;
width: 100%;
height: 85px;
background: white;
margin: 0 auto;
margin-top: 1em;
margin-bottom: 20px;
border-radius: 8px;
-webkit-transition: all 250ms;
transition: all 250ms;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.response-layer {
vertical-align: middle;
display: table-cell;
text-align: center;
font-size: 200%;
color: #a8a8a8;
}
#user-action-text {
color: #f1f1f1;
font-size: 400%;
}
#user-name {
border: 0;
outline: 0;
padding: 0;
margin: 0px;
margin-top: 10px;
width: 304px;
height: 55px;
color: white;
}
#user-action {
background: #e74c3c;
height: 134px;
}
#user-position {
height: 74px;
}
#user-uuid {
height: 54px;
}
section {
max-width: 650px;
text-align: center;
margin: 20px auto;
}
section img {
border: 0;
outline: 0;
padding: 0;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
display: block;
width: 100%;
margin-top: 1em;
-webkit-transition: all 250ms;
transition: all 250ms;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
resize: none;
}
.half {
float: left;
width: 48%;
margin-bottom: 1em;
}
.right {
width: 50%;
}
.left {
margin-right: 2%;
}
.user-data:hover {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px);
}
section img:hover {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px);
}
#-webkit-keyframes loading {
0%, 100% {
margin-top: -50px;
box-shadow: 0px 55px 40px 0px rgba(0, 0, 0, 0.3);
}
30%,
80% {
margin-top: 0px;
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.5);
}
}
#keyframes loading {
0%, 100% {
margin-top: -50px;
box-shadow: 0px 55px 40px 0px rgba(0, 0, 0, 0.3);
}
30%,
80% {
margin-top: 0px;
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.5);
}
}
#media (max-width: 690px) {
.half {
width: 304px;
float: none;
margin-bottom: 0;
}
}
/* Clearfix */
.activity-detail:before,
.activity-detail:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.activity-detail:after {
clear: both;
}
<h1>New Activity Details</h1>
<section class="activity-detail">
<div class="half right" id="image-data">
<img src="img/default-avatar.png" alt="Profile Photo" style="width:304px;height:304px;" id="profile-photo">
<a class="user-data" id="user-name">
<div class="response-layer">Green Leaf</div>
</a>
</div>
<div class="half left" id="general-data">
<a class="user-data" id="user-action">
<div class="response-layer" id="user-action-text">Greetings</div>
</a>
<a class="user-data" id="user-position">
<div class="response-layer">Developer</div>
</a>
<a class="user-data" id="user-uuid">
<div class="response-layer">324124535345</div>
</a>
</div>
</section>
On the parent div .user-data I changed display to table.
On the child div .response-layer (the one containing "Greetings") I changed the display to table-cell. Now the vertical align works.
Here's the link to the codepen: Codepen
Replacing
vertical-align: middle;
with
position: relative;
top: 25%;
does the trick.
Edit: The answer above is much cleaner
https://jsfiddle.net/qd2o38fp/1/
I want the user to be able to hover over the circle, and then click the circle itself to be directed to another link. (not the text when hovered)
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
position: relative;
cursor: default;
box-shadow:
inset 0 0 0 16px rgba(255,255,255,0.6),
0 1px 2px rgba(0,0,0,0.1);
transition: all 0.4s ease-in-out;
content: url(www.yahoo.com);
}
I tried to put
content: url(www.yahoo.com);
but this makes the text disappear for some reason.
If you want to be able to click it, it must be a link:
<a href="//www.yahoo.com" class="ch-info">
<h3>See Portfolio</h3>
</a>
Just display it as a block, and your current code will work:
.ch-info {
display: block;
}
.ch-grid {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;
}
.ch-grid::after {
clear: both;
}
.ch-grid li {
width: 220px;
height: 220px;
display: inline-block;
margin: 20px;
}
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
position: relative;
cursor: default;
box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.1);
transition: all 0.4s ease-in-out;
}
.ch-img-1 {
background-image: url(http://www.pulsarwallpapers.com/data/media/3/Alien%20Ink%202560X1600%20Abstract%20Background.jpg);
}
.ch-img-2 {
background-image: url(../images/2.jpg);
}
.ch-img-3 {
background-image: url(../images/3.jpg);
}
.ch-info {
position: absolute;
background: rgba(63, 147, 147, 0.8);
width: inherit;
height: inherit;
border-radius: 50%;
overflow: hidden;
opacity: 0;
transition: all 0.4s ease-in-out;
transform: scale(0);
display: block;
}
.ch-info h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 45px 0 0 0;
height: 140px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ch-info p {
color: #fff;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
opacity: 0;
transition: all 1s ease-in-out 0.4s;
}
.ch-info p a {
display: block;
color: rgba(255, 255, 255, 0.7);
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;
}
.ch-info p a:hover {
color: rgba(255, 242, 34, 0.8);
}
.ch-item:hover {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);
}
.ch-item:hover .ch-info {
transform: scale(1);
opacity: 1;
}
.ch-item:hover .ch-info p {
opacity: 1;
}
.ch-item::before {
content: "P";
position: absolute;
font-size: 180px;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-1">
<a href="//www.yahoo.com" class="ch-info">
<h3>See Portfolio</h3>
</a>
</div>
</li>
</ul>
extending Oriol's you could also use clip-path: circle(110px at center);
to limit :hover selection
.ch-grid {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;
}
.ch-grid::after {
clear: both;
}
.ch-grid li {
width: 220px;
height: 220px;
display: inline-block;
margin: 20px;
}
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
position: relative;
cursor: default;
box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.1);
transition: all 0.4s ease-in-out;
}
.ch-img-1 {
background-image: url(http://www.pulsarwallpapers.com/data/media/3/Alien%20Ink%202560X1600%20Abstract%20Background.jpg);
}
.ch-img-2 {
background-image: url(../images/2.jpg);
}
.ch-img-3 {
background-image: url(../images/3.jpg);
}
.ch-info {
position: absolute;
background: rgba(63, 147, 147, 0.8);
width: inherit;
height: inherit;
border-radius: 50%;
overflow: hidden;
opacity: 0;
transition: all 0.4s ease-in-out;
transform: scale(0);
display: block;
}
.ch-info h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 45px 0 0 0;
height: 140px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ch-info p {
color: #fff;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
opacity: 0;
transition: all 1s ease-in-out 0.4s;
}
.ch-info p a {
display: block;
color: rgba(255, 255, 255, 0.7);
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;
clip-path: circle(110px at center);
}
.ch-info p a:hover {
color: rgba(255, 242, 34, 0.8);
clip-path: circle(110px at center);
}
.ch-item:hover {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);
clip-path: circle(110px at center);
}
.ch-item:hover .ch-info {
transform: scale(1);
opacity: 1;
}
.ch-item:hover .ch-info p {
opacity: 1;
}
.ch-item::before {
content: "P";
position: absolute;
font-size: 180px;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-1">
<a href="//www.yahoo.com" class="ch-info">
<h3>See Portfolio</h3>
</a>
</div>
</li>
</ul>