I have a rollover image that adds an overlay when the user hovers.
I also display "Shop Now" text on top of the image when the user hovers over the image. My problem is that when the user hovers over the image, an overlay is added to the div containing the image and also the "Show Now" text.
That makes the "Shop Now" text look darker since it has two overlays.
How do I remove the extra layer on the "Shop Now" text?
This is my css:
.banner-box{
width:313px;
height:313px;
}
/*banner overlay*/
div.homepage-popular-categories {
position: relative;
display: inline-block;
}
div.homepage-popular-categories:hover p {
background: rgba(0,0,0,0.5);
}
div.homepage-popular-categories p:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
div.homepage-popular-categories p {
position: absolute;
background: rgba(0,0,0,0);
top: 0;
bottom: 0;
margin: 0;
width: 100%;
color: #eeeeec;
text-align: center;
font-family: sans-serif;
font-size: 1.5em;
font-weight: bold;
transition: 0.5s;
opacity: 1;
}
div.homepage-popular-categories:hover .shop-now-button {
visibility:visible;
}
div.homepage-popular-categories .shop-now-button {
border-radius: 25px;
border: 3px solid #fff;
left: 0;
right: 0;
top: 28%;
bottom: 0;
max-height: 40px;
margin: auto;
padding-top:20px;
box-sizing: border-box;
max-width: 125px;
font-size:1em;
padding-top:5px;
background: rgba(0,0,0,0);
visibility:hidden;
}
/*end banner overlay*/
This is my html
<a href="#">
<div id="ipad-width1" class="grid12-4 banner strov-3-banners shop-by-goal banner-box homepage-popular-categories ">
<p>SHOP BY GOAL</p>
<p class="shop-now-button">Shop Now</p>
</div>
</a>
<a href="#">
<div class="grid12-4 banner strov-3-banners trending banner-box homepage-popular-categories ">
<p>TRENDING</p>
<p class="shop-now-button">Shop Now</p>
</div>
</a>
<a href="#">
<div id="ipad-width3" class="grid12-4 banner strov-3-banners new-arrivals banner-box homepage-popular-categories ">
<p>NEW ARRIVALS</p>
<p class="shop-now-button">Shop Now</p>
</div>
</a>
Here's my fiddle:
https://jsfiddle.net/a75wbabp/
The oval with the Shop Now text should look like this
Add this CSS right after the :hover rules:
div.homepage-popular-categories:hover .shop-now-button {
background: rgba(0,0,0,0);
}
The problem is the button inherits the background color of the container for some weird reason. This will ensure it stays transparent.
You need to add this to the .shop-now-button on hover
background: transparent;
Check the fiddle https://jsfiddle.net/Pranesh456/3uszm3o7/1/
Related
In my photographic portfolio, I display a series of images of different ratio in tracks that automatically fill the width of the display. That is working perfectly... after receiving some help.
My ultimate objective is to permanently display a little heart over the top-left corner of each image AND display a semitransparent strip over the bottom of each image containing the caption only on mouseover the image.
I have almost achieved that result but I can not figure out after hours of trying how to overlay the 2 elements as explained above... so for now trhey are together on top of the image... which is not optimal.
So I would appreciate some help to achieve that result if possible.
Here is part of the code in question and a sample can be found on my website : TwoOverlaysOnImage.
CSS code
.my-flex-item {
background-color: #1d1d1d;
border: 2px solid #1d1d1d;
height: 100px;
}
.img-holder {
position: relative;
display: inline-block;
}
.img-holder p {
position: absolute;
display: inline-block;
text-align: left !important;
font-size: 0.7em !important;
width: 100%;
}
.img-holder:hover > p {
background-color: rgba(60,60,60,0.7);
text-align: center !important;
}
.img-holder span {
margin-top:40px;
color: white !important;
left: 30px;
}
HTML code
<div class="d-flex flex-row flex-wrap justify-content-center">
<div class="img-holder">
<p>
<img src="heart0.png" style="margin-left:6px; margin-top:4px;"/>
<span class="thumbCaption">caption</span>
</p>
<a href="modal...">
<img class="my-flex-item" src="imagepath..." alt="caption..." />
</a>
</div>
</div>
Try this:
html:
<div style="width: 100%; display: flex; justify-content: center;">
<div id="img-cont" class="img-cont">
<img class="heart" src="path/to/heart/icon">
<div class = "hover">
<p>Sample Text</p>
</div>
</div>
</div>
CSS:
.img-cont{
position: relative;
width: 420px;
height: 300px;
cursor: pointer;
background-size: cover;
background-image: url("https://images.unsplash.com/photo-1588876315093-ce09afb34028?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80")
}
.img-cont .heart{
position: absolute;
color: white;
top: 15px;
left: 15px;
cursor: pointer;
}
.hover{
clip-path: url(#img-cont);
position: absolute;
height: 0;
width: 100%;
bottom: 0px;
background-color: rgba(0, 0, 0, 0.5);
transition: all 0.3s ease;
}
.img-cont:hover .hover{
height: 50%;
}
.hover p{
color: white;
}
I'm trying to make an image semitransparent on hover and display text that is otherwise set to display: none. Currently if you hover over an image, it becomes semi-transparent (.single-image:hover works), but the text doesn't appear. When the text was not set to display: none, it is positioned over the image in the bottom left-hand corner. I thought that since it is over the image, the hover pseudo-class would take effect. I also tried setting the z-index of .attribution to 1 but that didn't do anything.
<div className="image-container">
<a href={image.links.html} target="_blank" rel="noopener noreferrer">
<img className="single-image" src={image.urls.regular} alt="" />
<p className="attribution">Unsplash</p>
</a>
</div>
.image-container {
display: inline-block;
position: relative;
}
/* Text */
.attribution {
display: none;
color: white;
position: absolute;
bottom: 20px;
left: 20px;
}
.attribution:hover {
display: block;
}
.single-image {
margin: 7px;
height: 350px;
width: 350px;
object-fit: cover;
}
.single-image:hover {
opacity: 0.7;
transition: 0.5s;
}
You should move the hover function to the parent div.
Change .attribution:hover to .image-container:hover .attribution and .single-image:hover to .image-container:hover .single-image.
Strangely enough, in order for this to work, you also need to add border or background-color to your parent div. (Here is why)
I added a transparent color background-color: rgba(0, 0, 0, 0);.
.image-container {
display: inline-block;
position: relative;
background-color: rgba(0, 0, 0, 0);
}
/* Text */
.attribution {
display: none;
color: white;
position: absolute;
bottom: 20px;
left: 20px;
}
.image-container:hover .attribution {
display: block;
}
.single-image {
margin: 7px;
height: 350px;
width: 350px;
object-fit: cover;
}
.image-container:hover .single-image {
opacity: 0.7;
transition: 0.5s;
}
<div class="image-container">
<a href="#" target="_blank" rel="noopener noreferrer">
<img class="single-image" src="https://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg" alt="" />
<p class="attribution">Kitten!</p>
</a>
</div>
.cont {
position: relative;
height: 150px;
width: 150px;
margin: 1em auto;
background-color: red;
}
.layer {
position: relative;
height: 150px;
width: 150px;
color: Transparent;
}
.layer:hover { color: white; }
.cont:hover { background-color: blue;}
<div class="cont">
<div class="layer">My cool Text</div>
</div>
Why did you not set the color of the font to transparent? it's easyer. see my little example (2 minutes workaround...)
Add a bit of javascript to make the text appear aswell as the image fade.
as only one element can be in hover state even if there ontop of each other.
unless you mess around with js you might be able to 'hack' a double hover state.
try;
<div className="image-container">
<a href={image.links.html} target="_blank" rel="noopener noreferrer">
<img className="single-image" src={image.urls.regular} alt="" />
<p className="attribution">Unsplash</p>
</a>
</div>
.image-container {
display: inline-block;
text-align:center;
position: relative;
z-index:1;
}
/* Text */
.attribution {
display: none;
color: white;
position: absolute;
z-index:3;
bottom: 20px;
left: 20px;
}
.single-image {
margin: 7px;
height: 350px;
width: 350px;
object-fit: cover;
z-index:2;
}
.single-image:hover {
opacity: 0.7;
transition:opacity 0.5s ease-in-out;
will-change:opacity;
}
<script>
document.addEventListener(DOMContentLoaded,(e)=>{
const img = document.getElementsByClassName('single-image')[0];
const attrib = document.getElementsByClassName('attribution')[0];
img.addEventListener('mouseover',(e)=>{
img.style.opacity = '0.7';
attrib.style.display = 'block';
});
});
</script>
how can I create menu like on the picture?
Requirements:
Built using Bootstrap columns, must be responsive
In normal state, only Option and icon (green square) can be seen
OnHover: The Suboption (in blue rectangle) expands pushing Option up and also Caption in red rectangle appears, also pushing the whole Option up.
When one Menu item is hovered, all the others must stay down, not moving
Expanding with animation
Here's my fiddle attempt: http://jsfiddle.net/52VtD/7878/
HTML of one item (all are wrapped in a row):
<div class="col-xs-12 col-sm-3 nopadding item">
<div class="mask">
<div class="inner-wrapper">
<p>Option A</p>
<div class="hidding-guy">
<p>Hello</p>
Suboption
Suboption
Suboption
</div>
<i class="origami o-01"></i>
</div>
<div class="btn-red ">CAPTION</div>
</div>
</div>
CSS:
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.footer-menu-wrapper {
background: #ddd;
position: fixed;
bottom: 0;
width: 100%;
margin: 0;
}
.footer-menu-wrapper .item {
position: relative;
}
.footer-menu-wrapper .item:hover .hidding-guy, .footer-menu-wrapper .item:hover .hidding-guy > * {
height: auto;
}
.footer-menu-wrapper .mask {
border: 1px solid #ccc;
width: 100%;
}
.footer-menu-wrapper .mask .hidding-guy {
height: 0px;
}
.footer-menu-wrapper .mask .hidding-guy > * {
display: block;
height: 0px;
}
.btn-red {
background: #e91333;
color: #fff;
width: 100%;
min-height: 66px;
border: 0px transparent;
text-align: center;
}
Alter your css to:
.footer-menu-wrapper .mask {
border: 1px solid #ccc;
width: 100%;
position: absolute;
background-color: #ddd;
bottom: 0;
}
now it behave like a dropup menu. Keep in mind that you must reset the positioning for the responsive layout like:
#media (max-width: 768px){
.footer-menu-wrapper .mask{
position: relative;
}
}
DEMO
UPDATE DEMO with media query
UPDATE:
Hide the CAPTION - opacity: 0 and show it on hover.
Second hide the options - visibilety: hidden and also show it on hover.
This ist a quick solution! The rest should be simple css styling
DEMO
I've been trying to achieve the effect of mouse over on a picture which dims its background and brings over a text on top.
Then I wanted a nice centralized text when I moused over.
These both things were achieved, but then I ran into a small problems.
How can I centralized the text without specifying width and height of the picture (to enable responsive design)
The Problem is that If I specify the width/Height, it would show the text perfectly centered, but when I change the page dimensions, it loses the center point.
HTML
<div id="bottomWide">
<ul>
<li class="first">
<img src="http://127.0.0.1/www/media/wysiwyg/sub-head1.jpg" alt="">
<div class="all-canvas">
<div class="all-text">
<span class="title">A Heading</span><br>
<span class="text">Couples of Lines of Text will come here</span><br>
<span class="shop">See Details.</span>
</div>
</div>
</li>
<li class="second">
<img src="http://127.0.0.1/www/media/wysiwyg/sub-head1.jpg" alt="">
<div class="all-canvas">
<div class="all-text">
Some text here, style as needed
</div>
</div>
</li>
</ul>
</div>
CSS
#bottomWide{
width:100%;
margin:0 auto;
}
#bottomWide ul{
margin:0;
padding:0;
}
#bottomWide li{
list-style-type: none;
display: inline-block;
width:50%;
text-align:justify;
float: left;
/* For Mouse Over*/
position: relative;
display: inline-block;
}
#bottomWide li:last-child img {
border-left: 4px solid #fff;
}
#bottomWide img{
width:100%;
}
#bottomWide li div.all-canvas{
position: absolute;
top: 0;
left: 0;
/* 100% will equal the dimensions of the image, as nothing else will be inside the .container */
width: 100%;
height: 100%;
color: #fff;
background-color: #000;
opacity: 0;
/* This will create the fade effect */
transition: opacity 0.3s;
-webkit-transition: opacity 0.3s;
/* Include all required vendor prefixes for opacity and transition */
margin: 0 auto;
}
#bottomWide li:last-child div.all-canvas {
margin-left: 4px;
}
#bottomWide li div.all-canvas:hover {
opacity: 0.7;
}
#bottomWide li:last-child div.all-canvas:hover {
opacity: 0.7;
margin-left: 4px;
}
div.all-text {
height:358px; /* This is what I want to change to %*/
width: 623px; /* This is what I want to change to %*/
text-align:center;
border:1px solid silver;
display: table-cell;
vertical-align:middle;
margin: 0 auto;
}
div.all-text span.title { padding: 3px; font: 18px/1.35 "Open Sans", Helvetica, sans-serif; text-transform: uppercase;}
Thanks.
this is small code for side menu of my page
<div style="display: block;" id="overlay" class="overlay">
<div id="sideMenuGroups">
<div id="sideMenuGroupHeader" class="mSideMenuSeparator">GROUPS</div>
<div id="sideMenuGroupContent" class="mSideMenuContent">
<div id="teacherGroup">As Teacher
<a onclick="groupFeeds();" href="#">Data Mining</a>
<a onclick="groupFeeds();" href="#">Data Structures</a>
<a onclick="groupFeeds();" href="#">C Language</a>
//**display anchor tag to full width of overlay**
<a onclick="groupFeeds();" href="#">Introduction to IT</a>
</div>
</div>
</div>
</div><!--overlay ends here-->
the css for the styles used is
*mSideMenuConten*t has no style defined
mSideMenuContent a- tells how each anchor tag would be visible, i have tried display:table-cell property, but it is not effective for me
overlay tells how the side menu would be
.mSideMenuContent
{
}
.mSideMenuContent a
{
display: table-cell;
height: 37px;
color: #c4ccda;
padding: 3px 0 3px 8px;
font-size: small;
}
.mSideMenuContent a:hover
{
background:#262c3a;
color: #c4ccda;
}
.mSideMenuSeparator
{
background: #434b5c;
border-top: 1px solid #242a37;
border-bottom: 1px solid #242a37;
font-family:Helvetica, sans-serif;
font-size:x-small;
color: #7a8292;
height:17px;
padding-top:4px;
padding-left: 10px;
text-shadow: 0 1px 0 rgba(0, 0, 0, .6)
}
.overlay {
z-index: 1000;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 50%;
height: 100%;
background:#31394a;;
color: #c4ccda;
display: none;
}
i want to display the anchor tag to full width of the side menu, how do i do that??
Use this:
display:inline-block;
width: 100%;
By saying inline block, you allow yourself to define a width for the element. Inline elements can't do this be default.
I found display block more convenient. I applied some margin and padding and i got cool/desired output.
display:block;
padding: some padding;
margin: some margin;