I am pretty new to CSS and I am trying to add some custom code to my site. Below is my current custom code. The title text is centered, but how do I vertically center the title text as well?Also, I already tried vertical-align: middle; but that didn't do anything. Any help would be great!
.image-slide-title
display: block;
position: relative;height: 100px;
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;
}
It's important to note that CSS is CSS and the fact that it's used in a SquareSpace theme is not important. SquareSpace doesn't use and special proprietary style.
I would also suggest that you build out a tiny version of what you are attempting in a jsFiddle or CodePen (for every stack overflow post)
html
<div class="example-area">
<h2 class="example-text">
Example text
</h2>
</div>
CSS
.example-area {
border: 1px solid red;
text-align: center;
}
.example-text {
border: 1px solid blue;
}
.w-padding .example-text {
padding: 100px 0; / *use padding to create size */
}
.w-flex {
display: flex;
justify-content: center;
align-items: center;
height: 231px; /* arbitrary example */
}
jsFiddle example: https://jsfiddle.net/sheriffderek/d85r37ob/
It all depends on what you are doing / if there is a background image - if the size is explicit etc.
Keep in mind that if you use flex-box, you'll have to organize the browser prefixes for it. I suggest autoprefixr
You can set padding top to align center or use flex property or line height.
.image-slide-title{
height: 100px;
line-height: 100px;
}
Instead of vertical align add this
line-height: 100px;
and that's all!
one thing I noticed in your code that after image-slide-title you does not added {
so don't forget to add that.
Related
I'm working on a home page for a film company's website, and it has a CSS button with a hover effect that is going to open a lightbox once it's ready, at the moment I just have it set to href="#" as a placeholder until I'm ready to implement the lightbox. There is also a small image of a downward pointing arrow, with the link set to an anchor that isn't on the page yet. Both of these work in Firefox, but in Chrome the hover effect doesn't work on the button, and it behaves as if neither of these elements have anchor tags around them. I poked around with Chrome's dev tools and it seems as though the span around the button may be the culprit as Chrome seems to be resizing it, but I can't figure out any reason why the image link isn't working, and I'm not entirely sure why Chrome is disagreeing with the span.
The strange part is that there are three other CSS buttons with hover effects in a seperate div, and they all work just fine.
The website is currently uploaded at http://www.gruntwork.us/reelindi/test/
The style sheet can be found at http://www.gruntwork.us/reelindi/test/reelindi.css
CSS:
div.header {
position:absolute;
top: 0;
left: 0;
right: 0;
background-image:url("resources/images/bg.jpg");
background-size:cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
height:430px;
width:100%;
z-index: -1;
}
img.arrow {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 58px;
z-index: 999;
}
span.redBtn a {
text-align:center;
display:block;
margin: 0 auto;
width: 150px;
margin-top: -40px;
z-index: 999;
}
a.redBtn {
color: #fff;
background-color: #d94d4d;
font-size: 1.125em;
padding: 8px 18px;
text-decoration: none;
text-align: center;
-webkit-transition: all ease 1s;
-moz-transition: all ease 1s;
-o-transition: all ease 1s;
-ms-transition: all ease 1s;
transition: all ease 1s;
border-radius: 5px;
}
a.redBtn:hover {
background-color: #bf3030;
}
HTML:
<div class="header">
<h1 class="header">Reel Indi</h1>
<h2 class="header">"Storytelling in motion."</h2><br>
<span class="redBtn">Push the red button!</span>
<img class="arrow" src="resources/images/arrow.png">
</div>
I've searched around but can't find an answer for this. Help?
Seems like your header's z-index: -1 rule pushes everything "behind" the body content, causing you not to be able to receive mouse events on that layer. Changing it to zero or higher will let you have hover effects and other events just fine.
I am trying to do the tooltip effect as the following link shows: http://tympanus.net/Development/TooltipStylesInspiration/line.html
I have the following source code on JSfiddle: http://jsfiddle.net/0b5gpLko/
Since I am not completely following the tutorial word by word, I like to know if there is a way to hide the element .inner from showing until it goes above the white bar .text{ border-bottom }.
Thank you
Just add overflow: hidden; to .text, like this
.text {
width: 280px;
display: block;
border-bottom: 10px solid #ffffff;
transition: transform .3s .2s;
transform: scale3d(0,1,1);
text-align: center;
overflow: hidden;
}
Fiddle
html:
<div id='test'><span></span></div>
CSS:
#test:hover span:before{content:'I want this to make the div expand in ease'}
#test, #test span:before, #test span{-webkit-transition: all 0.2s ease-in;-moz-transition: all 0.2s ease-in;-o-transition: all 0.2s ease-in;-ms-transition: all 0.2s ease-in;transition: all 0.2s ease-in}
I'm wondering if this can be achieved my CSS only: when mouseover #test, some text should be added into span, and the outer div should be expanded smoothly in ease.
The above HTML+CSS doesn't work, the DIV would expand immediately.
Here's one way to do it: http://jsfiddle.net/m49tdabh/. Note: I would recommend adding content in between span tags instead of using pseudo-elements.
HTML:
<div id='test'>
<span></span>
</div>
CSS:
#test {
outline: 1px dotted gray;
}
#test span {
display: table;
}
#test span:before {
content: "Hidden message displayed on hover";
display: inline-block;
width: 0%;
overflow: hidden;
white-space: nowrap;
border: 1px solid transparent;
transition: width 0.3s linear;
}
#test:hover span:before {
width: 100%;
border-color: red;
}
The reason your transitions aren't working is because there is nothing to transition in this scenario.
Computed values don't work for CSS transitions, as a transition needs both an initial and a destination state. So something like
#test span:before {
content: '';
max-height: 0;
max-width: 0;
overflow: hidden;
display: inline-block; }
#test:hover span:before {
content: 'I want this to make the div expand in ease';
max-height: 500px;
max-width: 500px;
transition: all 0.2s ease-in;
}
will work as the max height provides both an initial and destination value. That is what becomes animated in this scenario, not the simple adding of content as the CSS is agnostic of what content in present in the element – despite what you might think from seeing the content attribute in use for pseudo elements.
At the moment i am working on a header with a slider animation (css3 only):
http://jimmytenbrink.nl/slider/
Everything is working fine except sometimes the slider is bugging if you go from the center to the right. It seems that i need to stop the animation for a few miliseconds to complete. However i searched everywhere on the internet but i cant seem to get it to work.
Anyone here has experience with it who can help me out?
HTML
<header>
<div><span>slide 1</span></div>
<div><span>slide 2</span></div>
<div><span>slide 3</span></div>
<div><span>slide 4</span></div>
<div><span>slide 5</span></div>
<div><span>slide 6</span></div>
<div><span>slide 7</span></div>
<div><span>slide 8</span></div>
</header>
CSS
header {
margin-top: 10px;
width: 800px;
overflow: hidden;
height: 500px;
}
header div {
background-color: #000;
width: 43.8px;
height: 200px;
position: relative;
float: left;
-webkit-transition: width .3s;
transition: width .3s;
overflow: hidden;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
margin-right: 2px;
}
header div:first-child {
margin-left: 0px;
}
header div:last-child {
margin-right: 0px;
}
header div:hover span {
left: 50px;
opacity: 1;
}
header div img {
position: relative;
left: -240px;
-webkit-transition: all .3s;
transition: all .3s;
-webkit-filter: grayscale(1);
overflow:hidden;
}
header div span {
-webkit-transition: left .3s;
transition: left .3s;
position: absolute;
bottom: 30px;
color: white;
left: -350px;
opacity: 0;
width: 450px;
font-family:'Fugaz One', cursive;
text-transform: uppercase;
font-size: 24px;
color: #fff;
text-shadow: 0px 0px 10px #f1f1f1;
filter: dropshadow(color=#f1f1f1, offx=0, offy=0);
}
header:hover > div {
width: 43.8px;
}
header:hover > div:hover {
width: 150px;
}
Here is a JSFiddle
So the question is, how can i set a stop on the animation for a few miliseconds so the animation can finish before it gets triggered again?
Hope my question is clear!
(thanks for the edit)
One might call my answer a workaround. Maybe it is but according to my comment on ExtPro's answer - it is still completely pure CSS.
I decided to use display: table-cell since the table cell's width is distributed equally.
So, the CSS might look like this:
HINT: This is only a bunch of necessary CSS. All the code is in the jsFiddle
header {
width: 368px;
display: table;
overflow: hidden;
}
header > div {
width: 44px;
height: 200px;
position: relative;
-webkit-transition: width .3s;
transition: width .3s;
display: table-cell;
overflow: hidden;
}
header > div:hover {
width: 151px;
}
Fiddle
As you can see, we don't have to determine the width of all not-hovered divs. Actually, the problem came from that very CSS rule:
/* DON'T USE THIS RULE - IT'S THE RULE WHICH WAS BAD */
header:hover > div {
width: 43.8px;
}
You were changing the width of the divs on header:hover, so when the transition didn't manage to do its job in time, you came out with mouse pointing to the header but to non of the divs.
If I understand what you mean by 'bugging', what is happening is if you move the mouse quickly to the right, it traverses the currently open div and is left in an area which when that div collapses, does not contain (e.g. the mouse is not hovered over) the next one in order to expand it- namely the hover event of the following div(s) is/are not firing thus they do not expand. There wont be a CSS fix for this Im afraid as its browser related, you may want to replace with jQuery/JS.
I have a sidebar navigation in standard <ul><li><a></a></li></ul> pattern which truncates the full text of the links using overflow hidden. After hovering for 1s, I want the the anchor to expand in width, showing the full text of the link.
I have this functionality working completely in CSS, but I'm running into anomaly:
I have the width of the anchor set to Auto on :hover. After the 1s delay is triggered, the width of anchor snaps to 0 and then expands out to its full width.
below is my css, and here you can see my current code in action: http://eventfeedstl.com/day/07182011/
.day .sidebar{
width: 200px;
}
.day .sidebar ul {
list-style: none;
padding: 0;
margin:0;
position: absolute;
width: auto;
}
.day .sidebar ul li{
border-bottom: 1px solid #626666;
display: relative;
width: 200px;
}
.day .sidebar ul li:hover{
width: auto;
}
.day .sidebar ul li a{
font-weight: normal;
font-size: .8em;
color: #f2f2f2;
display: block;
width: auto;
padding: 4px 5px;
background: none;
width: 190px;
height: 10px;
overflow: hidden;
position: relative;
z-index: 10;
-webkit-transition: background 1.3s ease-out;
-moz-transition: background 1.3s ease-out;
transition: background-color 1.3s ease-out;
}
.day .sidebar ul li a:hover {
background: #797979;
-webkit-transition: background 0.15s;
-moz-transition: background 0.15s;
transition: background 0.15s;
text-decoration: none;
width: auto;
-webkit-transition-property:width;
-webkit-transition-delay:1s;
position: relative;
}
You are overwriting your transitions between background and width, which is probably causing problems.
There is a way to set multiple transitions but I'm fairly sure this way will cause problems.
But
In general transitioning to auto doesnt work yet. I like to use min-width and max-width in these cases to approximate the effect.
A solution for toggling between a specific width and auto:
The only way to get width: auto; transitions to work reliably is to explicitly set the width of items using Javascript. I know this defeats the purpose of using CSS transitions, but here's how I got it to work:
$(".author").each(function() {
$(this).width( $(this).width() );
});
and then in css
.author:hover { width: 200px; !important }
EDIT: Here's a pure CSS solution for toggling between 0 and auto: CSS transition not working for percentage height?