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;)
Related
I have an tag which is displayed as a block. On page load, its width is increased by a css animation from zero to some percentage of the containing div (the fiddle contains a MWE, but there is more than one link in this div, each with a different width). On hover, I want it to change colour, change background colour, and also expand to 100% of the div, using a CSS transition. The colour and background colour bit is working, but it seems to ignore the width transition.
Snippet:
.home-bar {
text-decoration: none;
background-color: white;
color: #5e0734;
display: block;
-webkit-animation-duration: 1.5s;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
animation-duration: 1.5s;
animation-fill-mode: forwards;
transition: color, background-color, width 0.2s linear;/*WIDTH IGNORED*/
border: 2px solid #5e0734;
overflow: hidden;
white-space: nowrap;
margin-right: 0;
margin-left: 5px;
margin-top: 0;
margin-bottom: 5px;
padding: 0;
}
.home-bar:hover {
background-color: #5e0734;
color: white;
width: 100%;/*WIDTH IGNORED*/
text-decoration: none;
}
#bar0 {
-webkit-animation-name: grow0;
animation-name: grow0;
}
#keyframes grow0 {
from {
width: 0%;
}
to {
width: 75%;
}
}
LINK
Note - I've tested it with changing the height of the link on hover, and it worked. Only the width does not work. Perhaps it has something to do with the animation on page-load.
When you set width using animation you will override any other width defined with CSS inluding the one defined by hover. The styles inside a keyframes is more specific than any other styles:
CSS Animations affect computed property values. This effect happens by
adding a specified value to the CSS cascade ([CSS3CASCADE]) (at the
level for CSS Animations) that will produce the correct computed value
for the current state of the animation. As defined in [CSS3CASCADE],
animations override all normal rules, but are overridden by !important
rules. ref
A workaround is to consider both width/max-width properties to avoid this confusion:
.home-bar {
text-decoration: none;
background-color: white;
color: #5e0734;
display: block;
animation: grow0 1.5s forwards;
transition: color, background-color, max-width 0.2s linear;
border: 2px solid #5e0734;
max-width: 75%; /*Set max-wdith*/
}
.home-bar:hover {
background-color: #5e0734;
color: white;
max-width: 100%; /* Update the max-width of hover*/
text-decoration: none;
}
/*Animate width to 100%*/
#keyframes grow0 {
from {
width: 10%;
}
to {
width: 100%;
}
}
LINK
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.
I am a complete newbie when it comes to HTML and CSS and just building my very first website. I want to create an image that, when hovered, displays text and fades the image to a lower opacity. I've got the fade all worked out, as well as the opacity change. My only issue is that the text, which is contained within the element I want to fade, also fades and I would like to keep it at 100% opacity. I have tried setting opacity to 1 for the text but it does not override the opacity change of its container. For example, I have:
<div class="textbox">
<p class="boxtext">This is the text that will eventually go inside the box. It is blah lljsd iofu isduf iou eiosu dfi eiou sdiofu ioe soidfu oidu foiu foisu doiu eoiusodidfu oei osidfuosdiu ieu oisduf oiueoisu dfoi oiu soifu iod fioeo dfs.</p>
</div>
And also
div.textbox {
background-color: white;
margin-left: 2.5vw;
border: 2px solid lightgray;
width: 15vw;
height: 600px;
float: left;
}
div.textbox:hover {
background-color: lightgray;
border: 2px solid lightgray;
opacity: 0.5;
}
p.boxtext {
margin: 5% 5%;
}
This creates the hover that I want, but I can't keep the text opacity at 100%.
Edit: Thank you for providing the rgba() solution, this solves the problem. I have another case of the same problem except that there is a background image instead of a solid background color. Is there a similar workaround?
Edit2: Issues with fade breaking after replacing opacity change with a separate transparent .png.
a#imglink1 {
background-image: url('https://www.profilesinhistory.com/wp-content/uploads/2012/11/Apollo-11-NASA-Photograph-Signed-Neil-Armstrong-Michael-Collins-Buzz-Aldrin-200x200.jpg');
width: 200px;
height: 200px;
float: left;
-o-transition: 0.5s;
-ms-transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;
}
a#imglink1:hover {
background-image: url('../images/apollo_transparent.png');
-o-transition: 1s;
-ms-transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
}
a#imglink1:hover p {
visibility: visible;
}
Since you're using a solid background color you can use rgba to only change the opacity of the background/borders and not affect the content inside. In your example:
div.textbox:hover {
background-color: rgba(222,222,222,.5);
border: 2px solid rgba(222,222,222,.5);
}
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgba()
For images you can accomplish a fade using :before and :after and fading the opacity of those elements:
a#imglink2 {
width: 200px;
height: 200px;
float: left;
position: relative;
}
a#imglink2 p
{
position: relative;
z-index:2;
}
a#imglink2:before
{
background-image: url('http://images2.layoutsparks.com/1/239061/welcome-orange-vintage-design.gif');
width: 200px;
height: 200px;
position: absolute;
top:0; left:0;
content:'';
z-index:1;
opacity:1;
transition: .3s opacity linear;
}
a#imglink2:after
{
background-image: url('http://images.all-free-download.com/images/graphicmedium/vintage_christmas_background_32295.jpg');
width: 200px;
height: 200px;
position: absolute;
top:0; left:0;
content:'';
z-index:1;
opacity:0;
transition: .3s opacity linear;
}
a#imglink2:hover:before
{
opacity:0;
}
a#imglink2:hover:after
{
opacity:1;
}
http://codepen.io/seraphzz/pen/ikJqB
I have a simple language select page with pure CSS animated transitions. I've made a jsFiddle here.
How it's supposed to behave is as follows:
User mouses over one of two (or more) language selectors.
That language selector transitions upward and comes to full opacity. The relevant language text (e.g., English, Español) appears as well.
The user either clicks on the link or mouses out, in which case the transition reverses.
In Chrome, it behaves as expected.
In Firefox, when I mouse over one image, both move up.
In Opera, it behaves mostly as expected, but the text jumps back down after moving up.
I'm trying to understand why this would happen in these browsers, and how I can fix it, if possible.
In the case that jsFiddle is down, the relevant code is:
HTML
<div id="container"><div id="cell">
<div class="langcell"><a href="en/index.html">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/a/a4/Flag_of_the_United_States.svg/200px-Flag_of_the_United_States.svg.png" /><br/><p>English</p></a>
</div>
<div class="langcell"><a href="es/index.html">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/9/9a/Flag_of_Spain.svg/200px-Flag_of_Spain.svg.png" /><br/><p>Español</p></a>
</div>
</div></div>
CSS
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#container {
width: 100%;
height: 100%;
display: table;
}
#cell {
display: table-cell; vertical-align: middle; text-align: center;
}
.langcell {
display: inline-block;
margin: auto 1em;
}
a {
position: relative;
top: 0;
-webkit-transition: top 0.25s;
-moz-transition: top 0.25s;
-o-transition: top 0.25s;
transition: top 0.25s;
color: black;
text-decoration: none;
}
a:hover {
top: -16pt;
}
a p {
font-size: 14pt;
font-weight: bold;
text-transform: uppercase;
font-family: Verdana, Geneva, sans-serif;
letter-spacing: 0.05em;
opacity: 0;
-webkit-transition: opacity 0.25s;
-moz-transition: opacity 0.25s;
-o-transition: opacity 0.25s;
transition: opacity 0.25s;
}
a:hover p {
opacity: 1;
}
a img {
opacity: 0.65;
-webkit-transition: opacity 0.25s;
-moz-transition: opacity 0.25s;
-o-transition: opacity 0.25s;
transition: opacity 0.25s;
}
a:hover img {
opacity: 1;
}
I got weird problems on firefox(v12) as well, where it was moving both elements up on hover. Later versions (19v), it seemed resolved.
I think there was something going on with your selectors and how mozilla interprets things versus webkit. See if this jsfiddle works for you.
All I really did was change a lot of the selectors of a to .langcell and it seem to work. I had to re-adjust a bit of css to achieve the same style, like the nested .langcell a selector. I have a suspicion that it may be due to a being inline by default while p is block and img is inline-block.
I won't lie and say I understand fully why that was happening to begin with, but just in general, giving styles to classes over elements is not just a preference, it is more efficient at render time as well.
CSS Selector Performance
Code:
.langcell {
display: inline-block;
margin: auto 1em;
position: relative;
top: 0;
-webkit-transition: top 0.25s;
-moz-transition: top 0.25s;
-o-transition: top 0.25s;
transition: top 0.25s;
}
.langcell a {
color: black;
text-decoration: none;
}
.langcell:hover {
top: -16pt;
}
.langcell p {
font-size: 14pt;
font-weight: bold;
text-transform: uppercase;
font-family: Verdana, Geneva, sans-serif;
letter-spacing: 0.05em;
opacity: 0;
-webkit-transition: opacity 0.25s;
-moz-transition: opacity 0.25s;
-o-transition: opacity 0.25s;
transition: opacity 0.25s;
}
.langcell:hover p {
opacity: 1;
}
.langcell img {
opacity: 0.65;
-webkit-transition: opacity 0.25s;
-moz-transition: opacity 0.25s;
-o-transition: opacity 0.25s;
transition: opacity 0.25s;
}
langcell:hover img {
opacity: 1;
}
CSS3 is pretty new. And many of the features are still not compatible in many browsers. Compatibility Chart
So it is kind of off-putting if your clients have a bit older browsers (even if they have a year old version), in which case CSS3 transition wont work.
Your safest bet to make the transition is to do it using javascript or some javascript library such as jQuery
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;
}