I have a :before pseudo element displayed on :hover of a particular element.
I'm using font awesome and want to vertically center the content of the :before, but vertical align, margins etc haven't been of much help.
Any ideas?
.tile:before {
font-family: FontAwesome;
font-size: 150px;
color: white;
text-align: center;
border-radius: 15px;
opacity: 0;
z-index: 9999;
width: 100%;
height: 100%;
content: "\f16b";
position: absolute;
background-color: rgba(219,127,8, 0.7);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.tile:hover:before {
opacity: 1;
}
Here are a few potential suggestions for .tile:before :
1 - use pixel value instead of 100% for height:
height: 100px;
2 - Make sure this is being displayed as an element that can ACCEPT margin, padding, etc.
display: block;
-or-
display: inline-block;
3 - I know you said you tried margins, but did you try padding-top?
padding-top: 20px;
4 - Try setting the overflow to hidden or visible. This often forces elements to behave "better."
overflow:hidden;
I would try all of these TOGETHER and see what happens.
Last, I might try setting a "top:" value since you have "position:absolute;" already. Maybe try this in conjunction with "position:relative;" too.
top: 10px;
Really need all the code (HTML) to tell what would work.
Using :before as the cover background to display on top of the tile element, and an :after with:
.tile:after {
top: 50%;
left: 50%;
/* Both half of font-size */
margin-left: -75px;
margin-top: -75px;
height: 150px;
line-height: 1;
}
Seemed to do the trick. Thanks all.
Related
I have a parent div wrapped around a scaled child div. The child div starts off with transform:scale(0,0); & expands to transform:scale(1,1); when a button is clicked.
.content-wrapper {
display: inline-block;
background-color: #ddf;
padding: 10px;
clear: both;
}
.content {
padding: 10px;
background-color: #fff;
display: flex-block;
overflow: hidden;
transform:scale(0,0);
transform-origin:top;
transition:transform 1s ease-out;
}
.content.open {
transform:scale(1,1);
}
However the parent div content-wrapper stays at the same size of the child div content - even when the child is "closed".
The desired behaviour is when the child div is closed the parent div shrinks to only wrap around the button.
JSFiddle of Example
Is it possible to wrap the parent div around the child div when it's "closed" in this example?
This will be a little challenging because the background color is attached to the content container. I would remove the background color from the main container, then make it a separate div positioned absolute
<div class="content">
...
<div class="content-bg"> //contains your background color
then manipulate that based on your click handler.
I've updated the JSFiddle http://jsfiddle.net/ztxa5kwu/90/
CSS for the new div:
.content-bg{
position: absolute;
background-color: #ddf;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: -1;
transition: all .5s ease;
transform-origin: bottom right;
}
Notice the transform-origin: bottom right; to scale the background towards your button. In the JSFiddle, I made the button take on a border the same color as the background, but you could easily edit the size of the new <div class="content-bg"></div> to fit around your button.
Hope that helps, and gets you in the right direction.
Try this:
.content {
background-color: #fff;
overflow: hidden;
transform:scale(0,0);
transform-origin:top;
transition:transform 1s ease-out;
display: block;
padding: 0;
height: 0; width: 0;
}
.content.open {
padding: 10px;
height: auto; width: auto;
transform: scale(1,1);
}
Edit: Play with this:
.content {
padding: 0;
background-color: #fff;
display: block;
overflow: hidden;
transform-origin:top;
transition: transform 1s ease-out, max-width 0.5s ease-out 0.4s, max-height 1s ease-out;
transform: scale(0,0); max-width: 0; max-height: 0;
}
.content.open {
padding: 10px;
transition: transform 1s ease-out, max-width 1s ease-out, max-height 8s ease-out;
transform: scale(1, 1); max-width: 1920px; max-height: 1080px;
}
I found this comment on an older question:
This method only partially achieves the desired effect but doesn't
actually remove the space. The transformed box acts like a
relatively positioned element - the space is taken up no matter how it
is scaled. Check out this jsFiddle which takes your first one and
just adds some bogus text at the bottom. Note how the text below it
doesn't move up when the box height is scaled to zero. – animuson♦ Jul
29 '13 at 20:37
So with that in mind I used the max-height/ max-width hack to get something close to what I was after: http://jsfiddle.net/BaronGrivet/ztxa5kwu/176/
.content {
padding: 10px;
background-color: #fff;
display: flex-block;
overflow: hidden;
transform:scale(0,0);
transform-origin:top;
transition:all 1s ease-out;
max-width: 0;
max-height: 0;
}
.content.open {
transform:scale(1,1);
max-width: 500px;
max-height: 500px;
}
I am using SquareSpace, and I am trying to add custom CSS to 3 images on my cover page. Currently on hover the images change opacity, and then a blue block appears with the title of the image. I am trying to make the blue block larger, but also make sure the block is trim to the actual image. As you can see in the following image, there is a little overhang:
Any help would be appreciated!
.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
display: block;
position: relative;
top: -15px;
text-align: center;
opacity: 0;
background-color: #1E75BB;
margin-bottom: 0px;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title {
display: block;
opacity: 50;
background-color: none;
text-align: center;
width: 100%;
}
.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
font-family: adelle-sans;
font-size: 16px;
color: #fff;
text-transform: uppercase;
}
.sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title {
font-family: adelle-sans;
font-size: 16px;
color: #fff;
text-transform: uppercase;
}
#media only screen and (max-width: 75px) {
.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
opacity: 50;
}
}
The thing is each image has different dimensions and share a common class (div.image-slide-title).
There are 2 ways I could think of, either photoshop all images to equal dimensions (say 248px wide as the last one) and impact div.image-slide-title with the same as above, only this time 248px width should work for all of them.
Or, isolate each image with a new class/id (example: div.image-slide-title-1, div.image-slide-title-2 & div.image-slide-title-3) and give it the following in addition to the proper width:
margin: 0 auto; to center.
Give the image's width to the blue block (example: last one should be width: 248px;)
Ok, so i have a little bit of a weird problem.
I have been working on a little website for a school project and i needed a panel of buttons on the side.
So i made some divs and made them link to my other pages and so on.
But then a weird problem came up. The area where i could click my divs was not confined to the area of the margin, but it went out to the full length of the page's horizontal axis, but not the vertical.
I have tried searching around for some kind of solution to this problem, but can't seem to find any. I have also tried to change the margin of my divs, but nothing seems to work.
This is the HTML code for my div and the link
<a href="main.html">
<div class="MenuTop">
<p id="MenuTextOn">Forside</p>
</div>
</a>
And this is the CSS code associated with that div element.
.MenuTop {
position: relative;
border-width: 3px;
border-style: solid;
border-color: black;
width: 70px;
height: 60px;
border-radius: 15px 30px;
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
background: -webkit-linear-gradient(bottom right, gray, #F0F0F0);
margin: 15px;
It should be noted that i'm new to this, but understand the basic principles.
Thanks for helping in advance! :D
You don't need to put a div inside an a element, just style the a starting with a display:block (to have it as a div by default):
Let's also organise better the CSS
.MenuTop {
/* positioning */
position: relative;
/* box-model */
display: block;
width: 70px;
height: 60px;
margin: 15px;
border-width: 3px;
border-style: solid;
border-color: black;
/* style */
background: -webkit-linear-gradient(bottom right, gray, #F0F0F0);
border-radius: 15px 30px;
opacity: 1;
/* effects */
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
}
Have a look here: https://jsfiddle.net/7063nkfg/
Read about inline and block elements in HTML - http://www.impressivewebs.com/difference-block-inline-css/
P.S.You don't need to put DIV and P tags into A, this will make your code difficult to read and undestand.
Make it all simplier, with styles:
html:
<div>
Text1
Text2
Text3
</div>
css:
a.menu {
display: block;
box-sizing: border-box;
padding: 15px;
width: 70px;
height: 60px;
/* other styles */
}
Has anyone figured out how to center align the content-wrapper in Gridster, if the wrapper is set to 100%?
I can't seem to get it to work.
When the browser window is resized there is some right-padding that I can't seem to change.
Can anyone help?
See this: http://www.danieldoktor.dk/test5/test5.html
So the problem here is that jquery is giving the LI elements a position absolute. I have overwritten that using important, you can then align everything center by using text-align and display inline-block.
.contentWrapper {
margin: 10px auto;
padding: auto;
overflow: hidden;
position: static !important;
display: inline-block;
text-align: left;
}
.gridster {
margin: 0 auto;
opacity: .8;
-webkit-transition: opacity .6s;
-moz-transition: opacity .6s;
-o-transition: opacity .6s;
-ms-transition: opacity .6s;
transition: opacity .6s;
text-align: center;
}
Hope that makes sense and helps.
I want a div to float next to my input but instead it's floating over top of it, and I'm not sure why. It's as if the div is set to use absolute positioning. I think I'm probably just overlooking something silly, but what is it?
html:
<input type="file" id="files" name="file" />
<div id="progress_bar"><div class="percent">0%</div></div>
css:
input { float: left;}
#progress_bar {
margin: 10px 0;
padding: 3px;
border: 1px solid #000;
font-size: 14px;
//clear: both;
opacity: 0;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-webkit-transition: opacity 1s linear;
}
#progress_bar.loading {
opacity: 1.0;
}
#progress_bar .percent {
background-color: #99ccff;
height: auto;
width: 0;
}
I have an example here:
http://jsfiddle.net/sWrvU/
which is based on the read files demo on html5rocks http://www.html5rocks.com/en/tutorials/file/dndfiles/
Uncomment clear:both to see the demo actually work (i.e. you can press the button because there's not a div on top of it), but then obviously the div still isn't floated next to the input.
Using display: block instead of opacity removes the transition, which I'm guessing you're trying to keep.
The Progress bar isn't "floating over top" so much as the input is floating underneath. If you float the progress bar as well, things should go a little better: http://jsfiddle.net/cjc343/sWrvU/24/
I changed it to use display instead of opacity since opacity means the element is still there even though it is transparent.
CSS
input {
float: left;
}
#progress_bar {
margin: 10px 0;
padding: 3px;
border: 1px solid #000;
font-size: 14px;
display:none;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-webkit-transition: opacity 1s linear;
}
#progress_bar.loading {
display:block;
}
#progress_bar .percent {
background-color: #99ccff;
height: auto;
width: 0;
}