I have text over a transparent background as shown here:
http://jsfiddle.net/L9ggc06c/
However, the text is still applying the transparency.
#content a:hover .text p{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
opacity:1.0 !important;
color:#FFF;
font-family: 'ralewayregular';
font-size: 200%;
text-transform: uppercase;
overflow:hidden;
position: relative;
z-index: 50;
text-align:center;
height:100%;
width:100%;
margin-top: 20px;
}
#content a:hover .text {
display:block;
position:absolute;
top:50%;
left:0;
height:75px;
width:100%;
margin-top: -37px;
background-color: rgb(0,0,0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
opacity: 0.7;
}
I've given the <p> tag position:relative and a z-index: 10, which solved my last situation. However it didn't this time. Any help would be appreciated.
The child element has 100% of the 70% transparency its parent element has. This is expected behavior. You would need use absolute positioning on the paragraph and make it a sibling element to take it outside the influence of the parent.
Demo
#content .text {
position:absolute;
top: 50%;
left: 0;
right: 0;
...
opacity: 0;
transition: all .3s;
}
#content a:hover .text {
opacity: 1;
}
Use rgba( ) to output background opacity.
you can do something like this:
#content a:hover .text p{
color: #fff;
}
#content a:hover .text {
background-color: rgba(0,0,0, 0.2);
}
Opacity sets all the contents of the div to opacity set.
You can try something like this:
<div class="overlay">
<div class="blackBar"></div>
<a>Overlay text</a>
</div>
This is just a demo, you will have to apply this to your case!
Related
I'm trying to make a hidden div to be reavelead using transition but I mess things up and it doesn't work.
I got a div on top of another but I have it hidden using the visibility property. Now when I hover over the bottom div (.hexagon) I have the top div (.product-text) displayed. Everything works just fine. Although I want to make it a little bit smoother using a transition, but it just doesn't work.
The css (I'm using Sass) :
(the bottom div):
.hexagon {
position: relative;
background-color: black;
width: 240px;
height: 138.56px;
margin: 69.28px 0;
border-left: solid 5px $honey;
border-right: solid 5px $honey;
display:flex;
justify-content: center;
img{
height:100%;
z-index: 1;
}
&:hover{
background-color:white;
cursor: pointer;
.product-text{
visibility: visible;
transition: visibility 3s;
}
}
}
.....
(the top div):
.product-text{
text-align: center;
font-size:18px;
color: black;
text-shadow: 2px 2px 3px $honey;
border-radius: 7px;
font-weight:bold;
opacity: 0.8;
z-index:2;
position:absolute;
bottom:0;
left:0;
width: 100%;
height:100%;
visibility:hidden;
background-color: rgba(15, 1, 1, 0.555);
p{
margin:0em;
}
}
You can't transition visibility (nor any other binary property). What you can do is an opacity transition.
.hexagon {
&:hover {
.product-text {
opacity: 1;
}
}
}
.product-text {
opacity: 0;
transition: opacity 3s;
}
You probably want the transition property applied directly to the class and not to the hover state.
Example:
.parent {
width: 200px;
height: 200px;
background-color: red;
}
.child {
width: 100px;
height: 100px;
background-color: blue;
opacity: 0;
transition: opacity 2s;
}
.parent:hover .child {
opacity: 1;
}
<div class="parent">
<div class="child"></div>
</div>
I'm trying to create a css effect on hover but that's don't work. I would like that the grey div don't move.
I use bootstrap 3 for the grid with 24px for the gutter (12px on each side).
This effect must be compatible with IE8.
Can I have some help please ?
.bgd-effect {
position: absolute;
height: 100%;
display: block;
left: 12px;
right: 12px;
background-color: blue;
z-index: 1;
}
.bgd-effect:hover {
left: 17px;
right: 8px;
}
Judging by the image you have used for your question the solution below is a simple one that will work on multiple different browser's.
CHECK IT OUT HERE: http://codepen.io/jacobg182/pen/Vvebxy
Simply add the following css using a pseudo hover effect:
.div:hover {
cursor: pointer;
-moz-box-shadow: 8px 15px 0px #00C2F1;
-webkit-box-shadow: 8px 15px 0px #00C2F1;
box-shadow: 8px 15px 0px #00C2F1;
-webkit-transition: all 500ms ease;
}
Also be sure to add a transition to the div without the pseudo hover state (Just to slow it down so it looks better)
.div {
transition: all 0.8s ease;
}
According to caniuse, you can use a pseudo element to create a copy and put it in the back.
.bgd-effect {
height: 100px;
width: 100px;
display: block;
background-color: black;
z-index: 2;
position:relative;
}
.bgd-effect:before {
content:"";
width:inherit;
height:inherit;
top:0;
left:0;
right:0;
bottom:0;
background-color: blue;
z-index:1;
position:absolute;
}
.bgd-effect:hover:before{
margin:10px;
}
Text on my image is not appearing. Its animating but i want text on my image on mouse hover. For text I used button with image that suppose to popup on mouse hover.let me know my mistake. I am using this code from youtube tutorial.
.main
{
border: 10px solid white;
width:378px;
height:250px;
margin:50px auto;
box-shadow:0px 0px 25px black;
overflow:hidden;
}
.main:hover img
{
-webkit-transform:scale(2,2) rotate(45deg);
}
.main:hover .content
{
-webkit-transform:translate(-311px);
}
img
{
-webkit-transition: -webkit-transform: 300ms;
}
.content
{
width:378px;
height:250px;
background: rgba(124,120,120,0.5);
-webkit-transition: -webkit-transform: 300ms;
}
button
{
width:100%;
height:50px;
margin-top:200px;
background:black;
border:0;
cursor:pointer;
color:white;
font:16px tahoma;
}
button:hover {
opacity: 0.5;
}
<div class="main"><img src="img/switch.jpg" height="250" width="378"><div class="content"><button>Pepe Kalvier Switches</button></div></div>
You can use the position absolute to move your text/button above the image when hover.
CSS
.main:hover .content{
z-index: 9999;
position: absolute;
top:0;
}
DEMO HERE
you can try this one:
<div class="main"><img src="http://dev.boutiquevalmont.com/media/wysiwyg/valmont/arts/thb3.jpg" height="250" width="378"><div class="content"><button>Pepe Kalvier Switches</button></div></div>
DEMO
I'm trying to create a versitile (for mobile, desktops and tablets) lightbox pop-up. I'm inputting it through Gravityforms, so the link itself can only be HTML.
This code works- but it's a little messy. It has to be gallery, and text, which I've achieved already. I'm using wordpress 4.0 so if there's a better plugin solution I'm open to it.
A nice transition when opening
Resize to fit mobile/smaller screens
Click background to close
There will be multiple galleries on one page.
My code so far
#gallery .item a {
overflow: hidden;
}
#gallery .item a img {
height: 100%;
align-self: center;
}
.lightbox {
/** Hide the lightbox */
display: none;
/** Apply basic lightbox styling */
position: fixed;
z-index: 9999;
width: 100%;
height: 100%;
top: 0;
left: 0;
color:#333333;
}
.lightbox:target {
/** Show lightbox when it is target */
display: block;
outline: none;
}
.lightbox .box {
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
min-width:500px;
margin: 2% auto;
padding:10px 20px 10px 20px;
background-color:#FFF;
box-shadow: 0px 1px 26px -3px #777777;
}
.lightbox .title {
margin:0;
padding:0 0 10px 0px;
border-bottom:1px #ccc solid;
font-size:22px;
}
.lightbox .content {
display:block;
position:relative;
}
.lightbox .content .desc {
z-index:99;
bottom:0;
position:absolute;
padding:10px;
margin:0 0 4px 0;
background:rgba(0,0,0,0.8);
color:#fff;
font-size:17px;
opacity:0.75;
transition: opacity ease-in-out 0.5s;
}
.lightbox .content:hover .desc {
opacity:0.8;
}
.lightbox .next,
.lightbox .prev,
.lightbox .close {
display:block;
text-decoration:none;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:22px;
color:#858585;
}
.prev {
float:left;
}
.next, .close {
float:right;
}
.clear {
display:block;
clear:both;
}
I think this is the kind of transition I want:
html { min-height: 100%; position: relative; }
body { margin: 0; height: 100%; margin-right: 2em; background: #110; }
dl { float: left; }
dd a {
background: #fff; display: inline-block;
transition: 4s box-shadow ease-in;
A zoom feature would be great too, (ie from within the lightbox) but I'm unsure that's possible.
Any help is much appreciated
My latest JSFiddle Click here
A nice transition when opening.
Use CSS transition
Resize to fit mobile/smaller screens Use max-width: 100%You might want to experiment with the length of the description in .desc as it seems to be too long for the width of a mobile screen
Click background to close. I think this can be achieved using javascript.
Check out the FIDDLE here.
I want to achieve the right arrow effect using css3, i tried a bunch of times already but no luck.
http://jsfiddle.net/ffCDw/
.menu li {
list-style-type: none;
display:inline;
}
.menu li a {
padding: 0 20px;
background: green;
color: #fff;
}
I had the same problem and the approach with the borders wasn't quite satisfying enough for me, especially if you want to use :hover...
HTML
I put a span inside the div, this is for the arrow only.
<div class="arrow">
I am the first arrow
<span></span>
<div>
CSS
span get's position:absolute;
Here the span:after is positioned and transformed (-45deg), so it points to the right.
And finally, by putting span overflow:hidden, there is only the part left visible that points to the right...
span {
content: "";
position: absolute;
top: 0;
right: -1.625em;
width: 2em;
height: 2.5em;
overflow: hidden;
z-index: 10;
}
span:after {
content: "";
position: absolute;
top: -3px;
left: -1em;
width: 2em;
height: 2.5em;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
border: 1px solid #777;
background: #60bee7;
}
I hope this is understandable. The only thing left is to style your div and span:after and if you want define the :hover states aswell on these elements.
Please note not to give the span any background-color
And here is a working example:
http://jsfiddle.net/marczking/PyKFT/
If you want to add an arrow to the right edge of these elements:
Updated fiddle
We're using CSS to add a triangle element after your anchor tag with this block:
.menu li a:after{
height:0;
width: 0;
top: 0;
left: 100%;
position:absolute;
content: ' ';
border-left: solid 5px green;
border-top: solid 9px transparent;
border-bottom: solid 9px transparent;
}
And then increasing the left margin of your li elements to account for the additional space these take up. You can play with the length of the triangle by increasing the pixel size of the border-left property, but be sure to increase the margin of the li accordingly.