My goal is to have an image show to the right of an h3 when a user hovers over it. My code works if the h3 is one line, but it breaks if h3 becomes two or more lines because the image shows still shows immediately after the text instead of after the whole block.
I am working on a WordPress Template.
I added the absolute positioning to a:hover:after because otherwise the insert of the image shifted the whole h3 element.
<div class="col-sm-10 offset-sm-1">
<div class="blog-entry">
<?php
the_title( '<h3 class="blog-entry-title">🥑 <a href="' . esc_url(
get_permalink() ) . '" rel="bookmark">', '</a></h3>' );
?>
</div>
</div>
Here is my CSS
.blog-entry-title {
min-height: 75px;
}
.blog-entry-title a {
color: #232323;
padding: 15px 90px 15px 15px;
}
.blog-entry-title a:hover {
color: #66ccff;
}
.blog-entry-title a:hover:after {
content:url('https://example/color-burst.png');
position: absolute;
top: -10px;
}
Try with background-image instead of content:url. You can adjust the background-position instead of moving top the img element generated.
I'm using position:absolute as well, but only to set the width and height, so elements stays at the end of the line.
.wrapper {
width: 250px;
}
.blog-entry-title {
min-height: 75px;
}
.blog-entry-title a {
color: #232323;
padding: 15px 90px 15px 15px;
}
.blog-entry-title a:hover {
color: #66ccff;
}
.blog-entry-title a:hover:after {
content: '';
background: url("https://upload.wikimedia.org/wikipedia/commons/f/fe/Farm-Fresh_bullet_error.png");
background-repeat: no-repeat;
background-position: 50% 40%;
position: absolute;
width: 16px;
height: 16px;
}
<div class="wrapper">
<div class="blog-entry">
<h3 class="blog-entry-title">Hello world</h3>
</div>
<div class="blog-entry">
<h3 class="blog-entry-title">The Best Guacamole Recipe in the World</h3>
</div>
<div class="blog-entry">
<h3 class="blog-entry-title">Goodbye world</h3>
</div>
</div>
</div>
Related
I have blog posts each with a cover image. I want to use these images in my post listing page as an experiment to see if it will liven up the page a little bit.
The images are too bright. I either want the opacity lowered or an overlay must be added.
Changing the opacity will change the opacity of the text. Adding an overlay has positioned itself on top of the anchors rendering them useless.
I am using the Gatsby Casper Starter Kit in the event that you are interested.
PostListing.jsx
...
<PostFormatting className={className} key={title} cover={cover}>
<PostHeader>
<h2 className="post-title">
<Link to={path}>{title}</Link>
</h2>
...
PostFormatting.jsx
...
const style = cover ? { backgroundImage: `url(${cover})` } : {};
return <article className={className} style={style}>{children}</article>;
...
Generated HTML
<article class="post" style="background-image: url("https://picsum.photos/1280/500/?image=800");">
<header class="post-header">
<h2 class="post-title">
Test Post
</h2>
</header>
<section class="post-meta">
<span>
<span class="tag">Mindset</span>
<span class="tag">Productivity</span>
</span>
<time class="post-date" datetime="2017-06-27">27 June 2017</time>
</section>
<section class="post-excerpt"><p>...</p></section>
</article>
CSS
All the styles I have for the post element.
<element.style> {
background-image: url(https://picsum.photos/1280/500/?image=800);
}
.home-template .content .post,
.tag-template .content .post {
background-color: rgba(0, 0, 0, .1);
padding: 30px 50px 50px 50px;
}
.post {
position: relative;
width: 80%;
max-width: 710px;
margin: 4rem auto 0em auto;
padding-bottom: 4rem;
border-bottom: #1a232c 3px solid;
word-wrap: break-word;
}
I know about this method but I don't know how to get the image into the after pseudo element.
div {
width: 200px;
height: 200px;
display: block;
position: relative;
}
div::after {
content: "";
background: url(image.jpg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Note: Try Radium for pseudo classes
U will have to put the overlay as a sibling of the content, and make it absolute.And also u will have to increase the z-index of the the content, so that it can be interactive.
In your case, all the elements inside the article should be grouped and put inside the content class.
Try this
.parent{
height:300px;
padding:50px;
position:relative;
}
.overlay{
position:absolute;
top:0;right:0;left:0;bottom:0;
background-color:rgba(0,0,0,0.5);
z-index:0;
}
.content{
position:relative;
z-index:1;
font-size:25px;
color:white;
}
<div class="parent" style="background-image:url(http://via.placeholder.com/350x150)">
<div class="overlay"></div>
<div class="content">Test Test</div>
</div>
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/
I have used position:relative to move the priceholder div above its initial position, now when I put another div below it which is the description div (you can check it on my jsfiddle), you can see that the priceholder div still occupies the area of its initial position.
My question is how do I remove this extra space? I do not want to use another position relative on my description div to fix it because it messes up my layout.
<div class="frame">
<div class="imageholder"><img src="http://i.imgur.com/daiSXVG.jpg"/></div>
<div class="priceholder"><p>$ 456</p></div>
<div class="description">This is a test description.</div>
</div>
Here is my jsfiddle: http://jsfiddle.net/MarkTe/g6zs8qhx/2/
I redid your structure a bit, removing some (unnecessary elements)
body {
margin-top: 50px;
}
.frame {
margin: 0 auto;
padding: 6px;
background: #fedd02;
border-radius: 6px;
width: 200px;
height: 150px;
}
.frame img {
max-width: 100%;
}
.priceholder {
border: 1px solid black;
border-radius: 50%;
width: 74px;
height: 74px;
position: absolute;
box-sizing: border-box;
margin-left: -37px;
margin-top: -43px;
padding: 10px 0 0 10px;
}
<div class="frame">
<p class="priceholder">$ 456</p>
<img src="http://i.imgur.com/daiSXVG.jpg" />
<p>This is a test description.</p>
</div>
Or see the updated Fiddle.
EDIT
To add this in a loop you could use something like this:
<?php
while( ...statement... ) {
echo '<div class="frame">';
echo ' <p class="priceholder">$ 456</p>';
echo ' <img src="http://i.imgur.com/daiSXVG.jpg" />';
echo ' <p>This is a test description.</p>';
echo '</div>';
}
?>
I have a div with an image and a hidden button that shows up when the image is being hovered.
However, I don't know how to position the button relative to the top and right of the image instead of the div...
And here is the fiddle of what I have so far: http://jsfiddle.net/ab3vg97t/
HTML:
<div class="placeholder-container">
<a href=<?= "index.php?page=viewPoll&id=".$currentPoll['idPoll']."&previous=My+polls"; ?>>
<img class="resize-to-fit-and-center placeholder-containter-img" src="<?= $currentPoll['image'] != '' ? UPLOADS_URL . "/" . $currentPoll['image'] : 'assets/img/default-poll.png' ?>" alt="Default poll image">
</a>
<a id="my-poll-delete-btn" href=<?="actions.php?action=deletePoll&id=".$currentPoll['idPoll']?>>
<i class="glyphicon glyphicon-remove"></i>
</a>
</div>
CSS:
.placeholder-container {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
display: inline-block;
position: relative;
}
.placeholder-container:hover #my-poll-delete-btn {
display: flex;
}
.placeholder-containter-img {
border-radius: 10px;
}
.placeholder-containter-img:hover {
box-shadow: 0 0 1em gray;
}
#my-poll-delete-btn {
display: none;
text-decoration: none;
position: absolute;
top: 10px;
right: 10px;
}
#my-poll-delete-btn:hover {
color: red;
}
.resize-to-fit-and-center {
max-width:100%;
max-height:100%;
vertical-align: middle;
}
What is wrong with this code? I have been working on this for hours and cannot figure out why the button.png will now show up but the link is there in the location of the "one" div..?
#one
{
position: fixed;
left:225px;
top:702px;
}
.button
{
display: block;
width: 40px;
height: 40px;
background: url('images/button.png') bottom;
text-indent: -99999px;
}
.button:hover
{
background-position: 0 0;
background-color: transparent;
border-style: none;
}
_
<body>
<div id="map">
<img src="images/map.png"/>
</div>
<div id="one">
<a class="button" href="images/one.jpg"/>
<img src="images/button.png"/>
</a>
</div>
</body>
Your title is not really much related to your question .. so I'll just try to answer the question.
The image is not showing, because by default img is an inline element and you've set text-indent to -99999px.
You can either remove that text-indent or set the display of img to block:
.button img { display: block; }