I would like to achieve what i wrote in the title, simultaneously.
What i have is a div that is width:100% (container) and contains 4 images inside of a div, 25% each (grid), with a description layer inside (on) it - called desc, for the overall dimensions, and span, for the mere text.
Here is the CSS:
.grid-container {
width: 85%;
margin-left: auto;
margin-right: auto;
}
.grid {
width: 25%;
float: left;
position: relative;
}
.grid img {
border-radius: 50%;
transition: .4s -webkit-filter linear;
-webkit-transition: background .5s ease 50ms;
transition: background .5s ease 50ms;
}
.grid img:hover {
filter: url(filters.svg#grayscale);
/* Firefox 3.5+ */
filter: gray;
/* IE6-9 */
-webkit-filter: grayscale(1);
/* Google Chrome & Safari 6+ */
background: rgba(168, 202, 217, .6)
}
.desc {
display: block;
position: absolute;
left: 26%;
width: 87%;
height: 100%;
top: 0%;
left: 0%;
border-radius: 50%;
}
.desc:hover {
background: rgba(168, 202, 217, .6)
}
.desc span {
width: 100%;
height: 100%;
text-align: center;
margin-top: 37%;
position: absolute;
left: 0;
top: 0;
font-size: 16px;
opacity: 0;
-webkit-transition: opacity .5s ease 50ms;
transition: opacity .5s ease 50ms;
color: #fff !important;
}
.desc span:hover {
opacity: 1;
}
So, what i want to achieve is to make the image go grayscale when hovered, while making the description visible. Description has a background color aswell (can i apply that to the image instead, along with the greyscale filter?)
The problem is that the description this way occupies the whole image, so the hover would be considered by the description only and not the image.
Any clues on how i can achieve what i want? Thanks for your attentio
Best regards
Simple, put both elements in the same container. For example,
.grid:hover img {
filter: url(filters.svg#grayscale);
}
.grid:hover .desc span {
opacity: 1;
}
If your description is an immediate following sibling of the image, you can use the immediate following-sibling selector:
.grid img:hover + .descr{display: block; background: whatever;}
(selects the element with the class="descr" once the mouse hovers over the image)
HTML structure for this to work:
<div>
<img>
<p class="descr">
</div>
Related
I found an excellent solution here to add a spinning GIF during a long (8-12sec) Ajax call, but I can't figure out how to vertically centre some text just above the GIF that will remain in the same relative position no matter the screen size.
Here's what I have so far:
<style>
/* Start by setting display:none to make this hidden.
Then we position it in relation to the viewport window
with position:fixed. Width, height, top and left speak
for themselves. Background we set to 80% white with
our animation centered, and no-repeating */
.modalLoading {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
text-align: center;
background: rgba( 255, 255, 255, .8 )
/*url('http://i.stack.imgur.com/FhHRx.gif') */
url('<?php echo BASE_HDR_TAG . "contest/common/img/ajax-loader-red.gif"; ?>')
50% 50%
no-repeat;
}
/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
body.loading .modalLoading {
overflow: hidden;
}
/* Anytime the body has the loading class, our
modal element will be visible */
body.loading .modalLoading {
display: block;
}
.modalFont {
color:#8B0000;
font-size: 20px;
font-weight:900;
font-family: 'Roboto', sans-serif;
}
</style>
This DIV is at the bottom of my body section:
<div class="modalLoading">
<div style="margin-top:25px">
<span class="modalFont">Please wait while we generate your entry form, including the PDF copy.<br />
Do not click the back button or close this browser tab.</span>
</div>
</div>
What it looks like now:
What I want it to look like:
EDIT
Trying the code from doesn't yield the desired results.
/* Start by setting display:none to make this hidden.
Then we position it in relation to the viewport window
with position:fixed. Width, height, top and left speak
for themselves. Background we set to 80% white with
our animation centered, and no-repeating */
.modalLoading {
display: none; /* if this is set to 'Flex' then the modal blocking appears on page refresh */
position: fixed;
/*z-index: 1000;*/
top: 0;
right: 0;
bottom: 0;
left: 0;
/*height: 100%;
width: 100%;*/
align-items: center;
justify-content: center;
background: rgba( 255, 255, 255, .8 )
/*url('http://i.stack.imgur.com/FhHRx.gif') */
url('<?php echo BASE_HDR_TAG . "contest/common/img/ajax-loader-red.gif"; ?>')
50% 50%
no-repeat;
}
/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
body.loading .modalLoading {
overflow: hidden;
}
/* Anytime the body has the loading class, our
modal element will be visible */
body.loading .modalLoading {
display: block;
}
.modalFont {
color:#8B0000;
font-size: 20px;
font-weight:900;
font-family: 'Roboto', sans-serif;
text-align: center;
margin-top: 100px;
}
<div class="modalLoading">
<span class="modalFont">Please wait while we generate your entry form, including the PDF copy.<br />
Do not click the back button or close this browser tab.</span>
</div>
EDIT 2
/* Start by setting display:none to make this hidden.
Then we position it in relation to the viewport window
with position:fixed. Width, height, top and left speak
for themselves. Background we set to 80% white with
our animation centered, and no-repeating */
.modalLoading {
display: flex;
position: fixed;
/z-index: 1000;/
top: 0;
right: 0;
bottom: 0;
left: 0;
/height: 100%;
width: 100%;/
align-items: center;
justify-content: center;
background: rgba( 255, 255, 255, .8 )
/*url('http://i.stack.imgur.com/FhHRx.gif') */
url('')
50% 50%
no-repeat;
}
/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
body.loading .modalLoading {
overflow: hidden;
}
/* Anytime the body has the loading class, our
modal element will be visible */
body.loading .modalLoading {
display: flex;
}
.modalFont {
color:#8B0000;
font-size: 20px;
font-weight:900;
font-family: 'Roboto', sans-serif;
text-align: center;
margin-top: 100px;
}
To center vertically a text, a possible solution is to use flexbox.
With this HTML:
<div class="modalLoading">
<span class="modalFont">Please wait while we generate your entry form, including the PDF copy.<br />
Do not click the back button or close this browser tab.</span>
</div>
You can write this CSS:
.modalLoading{
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba( 255, 255, 255, .8 ) url('http://i.stack.imgur.com/FhHRx.gif') 50% 50% no-repeat;
}
.modalFont{
margin-top: 100px; /* margin to move the text a little lower than gif loader. Change this margin with -100px if you want it to appear above the gif */
text-align: center;
}
EDIT 1
To work only after AJAX call, I only edited CSS the previous HTML I wrote doesn't change:
.modalLoading {
display: none; /* hidden when refresh the page */
position: fixed;
z-index: 1000;
top: 0;
right: 0;
bottom: 0;
left: 0;
/*height: 100%;
width: 100%;*/
align-items: center;
justify-content: center;
background: rgba( 255, 255, 255, .8 )
url('http://i.stack.imgur.com/FhHRx.gif')
50% 50%
no-repeat;
}
body.loading .modalLoading {
overflow: hidden;
}
body.loading .modalLoading {
display: flex; /*display using Flexbox */
}
.modalFont{
margin-top: 100px; /* margin to move the text a little lower than gif loader. Change this margin with -100px if you want it to appear above the gif */
text-align: center;
}
I'm trying to make a custom follower alert for Twitch TV. And I'm trying to centre a small image inside a div. So far I've managed to centre it horizontaly but no matter what I try it will not centre vertically. I'm not sure why, i've tried reading many other questions on stackoverflow already, as well as following a guide from W3schools but I think this is more of a specific problem to my code. Here is a fiddle. (You can't see the image but you can see where the image would be)
And here is the code; with the idea being that the image is centered both horizontally and vertically inside the small blue square, which i've named 'left-square-container'. However currently the image is horizontally centered at the top of the div only.
If anyone can help I'd appreciate it.
#keyframes slideInFromAbove {
0% {
transform: translateY(-100%);
}
6% {
transform: translateY(0);
}
98% {
transform: translateY(0);
}
100% {
transform: translateY(-100%);
}
}
#keyframes slideInFromTheLeft {
0% {
opacity: 1;
transform: translateX(-100%);
}
4.4% {
opacity: 1;
transform: translateX(0);
}
97% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-100%);
}
}
#keyframes slideInFromBelow {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0);
}
}
#keyframes slideInFromTheLeft-Text {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0);
}
}
.follower-container {
display: flex;
font-family: 'Roboto';
position: absolute;
overflow: hidden;
/*hide elements when they overflow*/
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.left-square-container {
width: 100px;
height: 100px;
background: #0d47a1;
position: relative;
display: inline-block;
float: left;
z-index: 1;
transform: translateX(-100%);
animation: 9.6s 1 slideInFromAbove;
/* timing (.4s duration + 8s hold + .4s removal of self + animation of right + removal of right) */
-webkit-animation-fill-mode: forwards;
/* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;
}
.icon img
/*THIS IS THE DIV TO CHANGE THE IMAGE ALIGNMENT*/
{
display: block;
margin: 0 auto;
webkit-filter: drop-shadow(1px 1px 1px #212121);
filter: drop-shadow(1px 1px 1px #212121);
}
.right-retangle-container {
width: 400px;
height: 100px;
opacity: 0;
background: #292929;
border-top: 5px solid #0d47a1;
box-sizing: border-box;
display: inline-block;
float: left;
position: relative;
/* needed for z-index*/
z-index: 0;
/*place under left square*/
transform: translateX(-100%);
animation: 8.8s .6s 1 slideInFromTheLeft;
/* timing (.5 initial animation duration + 8s hold + .3s removal of self) additional .6s of delay for animation of left square*/
-webkit-animation-fill-mode: forwards;
/* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;
}
.text {
font-size: 30px;
color: #ffffff;
overflow: hidden;
text-align: center;
/*vertical alignment of text*/
position: relative;
/*horizontal alignment of text*/
top: 50%;
/*horizontal alignment of text*/
transform: translateY(-50%);
/*horizontal alignment of text*/
}
.text-animation {
transform: translateY(100%);
animation: .5s 1s 1 slideInFromBelow;
-webkit-animation-fill-mode: forwards;
/* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;
margin-left: 20px;
margin-right: 20px;
}
.keyword:not(.user_message) {
color: #f57f17;
}
<div class="follower-container">
<div class="left-square-container">
<div class="icon">
<img class="image" src="{image}" />
</div>
</div>
<div class="right-retangle-container">
<div class="text">
<div class="text-animation">
New Follower <span class='keyword name'>{name}</span></div>
</div>
</div>
</div>
There are several ways to do this, but since you're already using flexbox, I would recommend continuing with that path.
On your .left-square-container div, simply change display to display:flex and then set align-items: center; and justify-content: center;.
Seems to work for me.
Fiddle
If you know the height of the container, you can set the line-height of said container to the value of its height.
I updated your CSS to look like so:
.icon {
text-align: center;
heignt: 100px;
line-height: 100px;
}
The "icon" div does not have any specified height. It is declared block. Hence, you cannot expect to align an image inside this div vertically as the scope of the div height-wise on the screen will be only of the size of the image.
Even in the in css of "icon", you have said margin:0 auto; -> The command will align the image in center not vertically but only horizontally. For what you want to happen, that 0 should be auto and then there should be some height of the div to see it align in the center vertically as well.
how to do responsive hover?
This is good hover example and it's perfectly fits for my screen size and this is bad not responsive hover example
This is my code
HTML
<div class="product-img-list">
<%= link_to product_path(product), class: 'product_link' do %>
<%= image_tag(product.image_url, class: "img-responsive", size: "300x250") %>
<% end %>
<span class="product-img-text"><span>code</span></span>
</div>
CSS
span.product-img-text {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 80px;
left: 15px;
position: absolute;
top: 230px;
width: 291px;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
.product-img-list:hover span.product-img-text {
opacity: 1;
}
span.product-img-text span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.img-responsive {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
.product-img-list.img-responsive {
display: inline-block;
margin: 0 1em 1em 0;
position: relative;
}
Thank you for help
I would say that you must make the .product-img-text be responsive (instead of using hardcoded dimensions)
something like the following
span.product-img-text {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
position: absolute;
height: 25%; /*assuming text is not that much*/
left: 1em; /*to account for margin*/
right:1em /*to account for margin*/
bottom: 0; /*add it to bottom of image*/
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
and you will have to make .product-img-list be realtive positioned if it is not.
.product-img-list{position:relative}
Example site
I have a site divided into your usual vertical sections. Header and footer both contain backgrounds with background-attachment: fixed. I have a slide-out nav, which you can see is activated on the first link. Everything works dandy except...
Issue:
Safari 6 (I'm not sure about 5.1, but it seems to be on Mac as my Windows Safari doesn't have the issue) has a nasty flicker upon animation. This can be resolved with the usual -webkit-backface hack HOWEVER upon using this, a new problem arises. The fixed background images start behaving very badly, and if you scroll/resize the browser enough, the images get distorted or content overlays improperly. Is there an alternative method I can use for this technique, or an actual fix?
HTML
<section>Hi CLICKME</section>
<section>hi</section>
<section>hi</section>
<section>hi</section>
<footer><p>I am some text</p></footer>
<aside class="menu">
I'm a menu.
</aside>
CSS
body {
background: #222;
transition: all 0.3s;
-webkit-backface-visibility: hidden;
}
body.bump {
transform: translate(-258px, 0);
}
section {
background: #CBA;
color: white;
line-height: 450px;
font-size: 32px;
height: 500px;
position: relative;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
z-index: 1;
}
section:nth-child(2) {
background: #FAFAFA;
}
section:nth-child(3) {
background: #CCC;
}
section:nth-child(4) {
background: #ABC;
}
section:first-child {
background: url(http://placekitten.com/1600/500) center top;
background-attachment: fixed;
-webkit-backface-visibility: hidden;
}
#media all and (min-width: 73.75em) {
section:first-child {
background-size: cover;
}
}
footer {
background: url(http://placekitten.com/1400/500) center top;
background-attachment: fixed;
color: white;
font-size: 32px;
height: 500px;
}
#media all and (min-width: 73.75em) {
footer {
background-size: cover;
}
}
footer p {
position: fixed;
bottom: 200px;
left: 0;
text-align: center;
width: 100%;
}
aside.menu {
background: #222;
color: #FFF;
height: 100%;
padding-top: 30px;
position: fixed;
top: 0;
right: 0;
text-align: left;
transform: translate(516px, 0);
transition: all 0.3s;
width: 258px;
-webkit-backface-visibility: hidden;
}
.bump aside.menu {
transform: translate(258px, 0);
}
JS (using Jquery)
$('section a').click( function(e) {
$('body').toggleClass('bump');
});
I did a workaround, by applying the fixed background to the body, wrapping everything in body in another div (animating that instead, so it wasn't affecting the body background) and the footer stayed the same, since having scrolled that far there is no way to pop the sidebar out anyway (so no animation flicker to worry about).
I have a small issue about css3 and trapeze. I have two square images side by side (float left each - white dots) and I want them to look like this :
How would you do it? Is it possible?
If the pic1 is a .png and the negative space created by the angle of the trapeze edge is transparent, then this should work:
#pic1, #pic2 {
float: left;
position: relative;
}
#pic1 {
z-index: 2;
}
#pic2 {
right: 30px; /* Or whatever the difference in image sizes is */
}
You can use the CSS triangle trick with the transparent borders
html
<div class="pic pic-1">Pic 1</div>
<div class="pic pic-2">Pic 2</div>
css
.pic{
width:100px;
height:100px;
float:left;
text-align:center;
line-height:100px;
color:white;
position:relative;
}
.pic-1{
background:orange;
}
.pic-2{
background:limegreen;
}
.pic:after{
content:'';
display:block;
position:absolute;
height:0;
width:0;
z-index:10;
}
.pic-1:after{
top:0;
right:-10px; /* must match the border left */
border-left: 10px solid orange; /*play with width to change angle*/
border-bottom:50px solid transparent;
}
.pic-2:after{
bottom:0;
left:-10px; /* must match the border right*/
border-right: 10px solid limegreen;/*play with width to change angle*/
border-top:50px solid transparent;
}
Demo at http://jsfiddle.net/gaby/eh2f3/
First of all you begin setting a strip that will cut alogn the top and botom borders, and where you will place the images:
.demo1 {
overflow-y: hidden;
}
Inside, there will be the base elements, that are floated left,
.base {
width: 100px;
height: 100px;
float: left;
}
Inside, a clipping element rotated:
.demo1 .clip {-webkit-transform: rotate(15deg);}
.clip {
height: 177%;
width: 125%;
margin-top: -40%;
-webkit-transform-origin: 0% 50%;
overflow: hidden
}
and inside, the image, counter-rotated
.demo1 .inner {
-webkit-transform: rotate(-15deg);
}
.inner {
-webkit-transform-origin: 0% 50%;
margin-left: -151%;
margin-top: 19%;
}
The html is :
WEBKITTED DEMO
webkitted means that only webkit prefixes are used :-)
Since somebody out there was offering 1 milliion points, I decided to do an extra effort. See the second strip (demo2) where the rotations are specified thru nth-child(). That allows to get different angles for every transition.
Full CSS :
.demo1, .demo2 {
overflow-y: hidden;
}
.base {
width: 100px;
height: 100px;
float; left;
}
.clip {height: 177%; width: 125%; margin-top: -40%;-webkit-transform-origin: 0% 50%; overflow: hidden}
.inner {-webkit-transform-origin: 0% 50%;margin-left: -151%;margin-top: 19%;}
.terminator {background-color: white}
.demo1 .clip {-webkit-transform: rotate(15deg);}
.demo1 .inner {-webkit-transform: rotate(-15deg);}
.demo2 :nth-child(odd) .clip {-webkit-transform: rotate(15deg);}
.demo2 :nth-child(odd) .inner {-webkit-transform: rotate(-15deg);}
.demo2 :nth-child(even) .clip {-webkit-transform: rotate(-15deg);}
.demo2 :nth-child(even) .inner {-webkit-transform: rotate(15deg);margin-left: -151%;margin-top: -30%;}
Note the calculus to place the images accurately are strange; I end doing it by trial and error. Also, you need images with plenty of margin to be cutted without losing the point of interest.