Hover caption on image causes big white gap below image - css

I am building a website with WordPress. On my homepage I want a picture grid (10 x 3) of different products, and when you hover over each picture, a caption with the product name will pop up.
I have managed to do 3/4 of it but there's this massive white space below each row. :(
I am using the SiteOrigin editor widget to insert the image, and using HTML and CSS to code the hover effects. See below for the current coding.
HTML:
<div id="pic">
<img class="hover" src="http://peacefruit.net/wp-content/uploads/2016/11/Hassaku.png" />
<p class="text">Summer Mikan</p>
</div>
CSS:
.text {
color: #000000;
font-size: 16px;
font-weight: bold;
text-align: center;
background: rgba(255, 255, 255, 0.5);
}
#pic .text {
position:relative;
bottom:80px;
left:0px;
visibility:hidden;
}
#pic:hover .text {
visibility:visible;
}
Here's the website so you can see what I've done: http://peacefruit.net
The top row has the captions, but also, the pesky gap. The bottom three rows are examples of how I want it to look (no borders or gaps between pics). All rows and individual widgets have no padding, margins or gutters and I've already adjusted the theme padding to 0 with CSS.
I'm sure it's a simple line of code I'm missing, but it's driving me crazy!
Please send help.

Try adding to your inline css for siteorigin-panels-stretch
overflow:hidden;
height:164.89px;
Hope this works.
Thanks!

In your case
the id should be unique.
So, it is better to change #pic to a class
Also, the <p> tag in your style contain padding-bottom and it will case the white space problem.
Change each pic to the following
HTML:
<div class="pic">
<img class="hover" src="http://peacefruit.net/wp- content/uploads/2016/11/Hassaku.png">
<div class="text">Summer Mikan</div>
</div>
CSS:
.pic{
position: relative;
}
.pic .text{
position: absolute;
top: 80px;
width: 100%;
visibility: hidden;
}
then it should be work.

Stylesheets for WordPress themes can have a lot of CSS bloat, so you're on the right track creating a custom stylesheet, to tackle the styling nuances you desire.
Since this is a responsive theme, it's best to begin solving this from a mobile-first perspective.
The first thing to prune is the bottom-margin: 30px; for .panel-grid-cell, like this:
.home #main .panel-grid-cell {
margin-bottom: 0;
}
The next thing is to correct your HTML mark-up. The value of pic is given to multiple id attributes. An id attribute is used to denote a unique element. The class attribute denotes a non-unique element. pic should be assigned to class attributes instead, since many elements in your layout utilize this hook value. Like this:
<div class="pic">
I'm noticing that img.hover and p.text are getting wrapped in an unnecessary <p> tag. Make sure that this does not happen in the SiteOrigin editor.
You should then prune the bottom-margin: 1.5em for paragraphs inside of the .pic divs (note the designation of pic as a class hook .pic, rather than an id hook, which would have been #pic):
.pic p {
margin-bottom: 0;
}
To get even closer, relative positioning should be used on the .pic div to ensure that the subsequent styling suggestion (position: absolute;) will take effect:
.pic {
position: relative;
}
And then, for the text that appears when hovering an image:
p.text {
position: absolute;
width: 100%;
}
The styles above will work for mobile, but your theme is responsive, and you might need to account for some styling variations with different screen sizes.
For tablets, you'd need a media query like this:
#media (min-width: 600px) {
.some-class {
some-property: some-value;
}
etc...
}
And finally, for desktop:
#media (min-width: 1000px) {
.some-class {
some-property: some-value;
}
etc....
}

Thanks everyone for your help :) After some fiddling around with the suggestions and a software update, there is no gap now!
I thought I'd post my final code in case anyone has a similar problem and it might be of some help. (Note: there are some minor style changes which differ from the original post but have no effect on how it works).
HTML:
<div class="pic">
<img class="hover" src="http://peacefruit.net/wp-content/uploads/2016/11/Summer-Mikan.png"/>
<div class="text">Summer Mikan</div>
</div>
WIDGET CLASS:
fade
CSS:
.fade {
-webkit-opacity: 0.6;
-moz-opacity: 0.6;
opacity: 0.6;
}
.fade:hover {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
.pic {
position: relative;
}
.text {
color: #FFFFFF;
font-size: 22px;
font-weight: bold;
text-align: center;
background: rgba(214, 187, 14, 0.85);
}
.pic .text {
position:absolute;
top: 0px;
width: 100%;
visibility:hidden;
}
.pic:hover .text {
visibility:visible;
}
.pic p {
margin-bottom: 0px;
}
So glad it finally works, much appreciation to everyone!

Related

Mix-blend-mode difference not working and background image of parent is in front of children regardless of z-index

Edit: Apologies, forgot to add the sandbox to tinker: https://codesandbox.io/s/inspiring-wing-tekl08
I'm having an issue with my CSS. To clarify, the reason I want to do this is because I want my text to have a mix-blend-mode: difference on h1 within a media query, and after researching on here and other forums I've concluded that it's only possible if the background image which the text blends with is inserted via CSS instead of an <img/> in my React Component. If this is possible in any other way and I'm going about this wrong, feel free to give me a better option.
For some reason, the background image that I've inserted (see code below) is placing itself in front of h1. I've tried setting a z-index: 1 on the image and position: relative - z-index:something>1 on the text but it doesn't seem to work. Same goes for the <Nav/> tag that can be seen in the component - it ends up hidden behind the image.
Component:
const PageHeader = () => {
return (
<motion.div
id="header"
variants={imgFade}
initial="hidden"
animate="show"
className="bg-image"
>
<div className="header-container">
<div className="title-container">
<motion.h1
variants={textAnimate(0.7)}
initial="hidden"
animate="show"
>
FNAME
</motion.h1>
</div>
<br />
<div className="title-container">
<motion.h1
variants={textAnimate(0.8)}
initial="hidden"
animate="show"
>
SNAME
</motion.h1>
</div>
<Nav />
</div>
</motion.div>
);
};
export default PageHeader;
CSS:
.bg-image {
background: url("img/compressed/Website\ Cover_Open_NoBG.png") no-repeat
bottom right;
background-size: contain;
width: 100%;
height: 100%;
float: right;
}
.header-container {
margin-left: 100px;
margin-top: 200px;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.title-container {
overflow: hidden;
}
h1 {
font-family: "Lato";
font-size: 5rem;
font-weight: 300;
vertical-align: middle;
text-align: left;
mix-blend-mode: color;
pointer-events: none;
}
Apologies if it's blaringly obvious - again if someone can find an alternative to do the code below then I would much rather follow through with that:
#media screen and (max-width: 1200px) {
.h1 {
mix-blend-mode: difference;
}
Thanks!
UPDATE: This has been solved by just putting position: relative; z-index: 2 on .header-container. Perfect example of stopping coding after 3am or else you get blinders on and can't see the obvious answer.
In case anyone can help regarding mix-blend-mode: difference do let me know.
UPDATE 2: Second issue solved! Had to put a background color of white on the background property and also put the mix-blend: mode on .header-container - Text had to be changed to white and kept on difference blend even on a white backdrop.

change the background image by "hovering" over a div in css

trying to get my code to change the background image to "color.jpg" when "spiral.svg" is being hovered over. I think im getting closer, definitely missing something but not sure what that is!
HTML
<div class ="spiral">
<img src="spiral.svg">
</div>
CSS
img {
max-width: ???;
max-height: ???;
}
.spiral:hover {
background:url('color.jpg') center;
z-index: some positive number higher than my orig background image?
}
body {
background:url('orig.jpeg') center;
z-index: -60;
}
You may try something like this.
.twitter{
display:block;
border:1px solid red;
width: 30px;
height:30px;
background-image:url(http://i.imgur.com/qM7IYaM.png?1);
background-position:-32px 31px;
transition:0.1s;
}
.twitter:hover{
background-position:-32px 63px;
}
<div href="https://twitter.com/georgevere12" class="twitter">
</div>
looks like this is not possible with just CSS/HTML however this was the best link i found using a tiny bit of jquery https://stackoverflow.com/a/19770298/5225450

Change the size of the number input spinner?

On a number input it has a spinner which has several css properties but I can't seem to find a way to change the size of the spinner itself. I am talking about <input type='number'>. I tried finding something that would change the size but I haven't been able to find anything. The other issue I guess is that every browser on possibly every OS is going to have a potentially different implementation of the spinner itself. When I say spinner I am talking about the highlighted part of this image.
I cannot use the JQuery UI spinner because the large app I am developing uses JQuery UI 1.8 which did not include the spinner. Upgrading causes issues.
Not ideal, but try playing around with the CSS transform property:
For example,
input[type=number]
{
transform: scale(2);
}
This increases the size of the entire input, but maybe this (in conjunction with setting font-size, line-height, height, width) can produce a desired effect.
This CSS seems to work in Chrome by replacing the spinners with a static image (of a spinner) and then control the size and position of the image within the element and making it invisible by default until the user hovers over it:
* Spin Buttons modified */
input[type="number"].mod::-webkit-outer-spin-button,
input[type="number"].mod::-webkit-inner-spin-button {
-webkit-appearance: none;
background: #0F0 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKUlEQVQYlWNgwAT/sYhhKPiPT+F/LJgEsHv37v+EMGkmkuImoh2NoQAANlcun/q4OoYAAAAASUVORK5CYII=) no-repeat center center;
width: 3em;
border-left: 1px solid #0f0;
opacity: 0; /* shows Spin Buttons per default (Chrome >= 39) */
position: absolute;
top: 0;
right: 0;
bottom: 0;
}
input[type="number"].mod::-webkit-inner-spin-button:hover,
input[type="number"].mod::-webkit-inner-spin-button:active{
box-shadow: 0 0 2px #0CF;
opacity: .7;
}
Plain ole HTML...
No library or images required.
HTML
<!-- Score Control Container -->
<div class = "Score-Control">
<div class = "Score-Value-Container">
<div id="RoundScore" class="Score-Value">
10
</div>
</div>
<div class = "Score-UpDown">
<div class = "Score-Button-Container">
<div class = "Score-Button " onclick="IncrementScore();">
▲
</div>
</div>
<div class = "Score-Button-Container">
<div class = "Score-Button " onclick="DecrementScore();">
▼
</div>
</div>
</div>
</div>
CSS
.Score-Control {
width: 200px;
}
.Score-Value-Container{
position:relative;
display: table;
overflow: hidden;
height:80px;
background-color:#aaa;
width:66%;
float:left;
font-size: 44px;
vertical-align: middle;
text-align: center;
}
.Score-Value {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.Score-UpDown{
position:relative;
height:80px;
background-color: burlywood;
width:34%;
float:right;
}
.Score-Button-Container {
display: table;
height: 50%;
width: 100%;
overflow: hidden;
background-color:green;
}
.Score-Button {
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 27px;
}
JavaScript
function IncrementScore() {
var RoundScore = document.getElementById("RoundScore").innerHTML;
if (RoundScore < 10) {
RoundScore++
document.getElementById("RoundScore").innerHTML = RoundScore;
}
}
function DecrementScore() {
var RoundScore = document.getElementById("RoundScore").innerHTML;
if (RoundScore > 1) {
RoundScore--
document.getElementById("RoundScore").innerHTML = RoundScore;
}
}
Code in JSFiddle
You could make an input field with two buttons for up and down and style them then the way you like.
<input type="text" name="something">
<span class="goUp"></span>
<span class="goDown"></span>
js:
var inputField = $('input[name="something"]');
$('.goUp').click(function() {
inputField.val(inputField.val() + 1);
});
$('.goDown').click(function() {
inputField.val(inputField.val() - 1);
});
you then should also check, that the input has only numbers inside, so that your +/- 1 really works.
The “size of the spinner” is a vague concept, but the <input type=number> element seems to obey at least width, height, and font property settings. Example:
<input type=number value=42 min=0 max=99
style="font: 24pt Courier; width: 3ch; height: 3em">
Whether such settings are useful and whether they should work is a different issue. It can be argued that the implementation of such elements is expected to be a browser-dependent nice, useable widget suitable for the browsing conditions, rather than something that authors should mess around with. But in practice, the widget is largely affected by CSS settings, and this might be a good thing in practice, e.g. because the input box tends to be too wide by default. (We could expect browsers to set it according to min and max values, but this just doesn’t happen at present.) The risk is that by setting the width, you might conflict with the implementation. The code above expects the up and down arrows to take a width of one character at most, but this guess might some day be wrong.

(HTML5) Need to make some images transparent, and others not

I'm actually a brand-new coder, just starting on HTML (started yesterday) and I'm having a bit of trouble with something that I can't quite seem to find out how to do. I used CSS to make an image transparent on my main page, but unfortunately, it makes all the other images transparent as well, despite the fact that all the others are meant to be opaque. Here's the source code for my index.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("bg.png");
background-color: #cccccc;
}
h1 {color:green}
p {color:blue}
h1 {
text-align: center;
}
p {
text-align: center;
}
header {
position:fixed;
top:0;
background-color:#333;
opacity: 0.4;
width:100%;
height:40px;
padding:20px;
text-align:center;
}
footer {
width: 100%;
bottom: 0;
background-color:#333;
opacity: 0.4;
position: fixed;
text-align:center;
}
#main{
padding-top:100px;
text-align:center;
}
img {
opacity: 0.4;
}
img:hover {
opacity: 1.4;
}
</style>
</head>
<title>Jordan's Test Site (iCarlos)</title>
<body center>
<header> Deal with it B)</header>
<div id="main">
<p><img src="giphy.gif" alt=Deal with it! style="width:500px;height:273px"></p>
<p>Hello! I am a website. Testing, testing, 1 2 3.</p>
<p><img src="deal-with-it.png" alt=Clic! style="width:450px;height:80px"></p>
<p>Click here to go to the table!</p>
</div>
<footer>
<p><img src="home.png" alt=source style=width:124;height:124></p>
</footer>
</body /center>
Thanks for the help, guys!
The simplest approach would be to define a class for transparent images (your current selector img adds the opacity rule to ALL the images) and then add these rules:
img.transparent {
opacity: 0.4;
}
img.transparent:hover {
opacity: 1; // no point in going higher than 1 here
}
Then in the HTML, just add the class to those images you want transparent:
<img src="image.jpg" class="transparent" alt="" />
You need to select your specific image.
Right now, img selects the tag img and not a specific image. You need to select an additional attribute to specify which image. You can do that by adding a class attribute, an id attribute or using your existing attributes like so (though I wouldn't generally recommend this):
img[alt=Clic!] {
opacity: 0.4;
}
img[alt=Clic!]:hover {
opacity: 1;
}
At the moment you're targetting every single imgtag in your HTML.
You have two easy ways to target only some images :
Add a class to the images you want to make transparent, in your HTML, and target that class in CSS
Example HTML :
<img class="transparent" src="..." alt="...">
And in the CSS :
img.transparent{
opacity: 0.5; /* Example, set it to whatever you want */
}
You can also keep your HTML structure and target your element more precisely with CSS
Let's say that you want to change the opacity of the img that are contained in the header, and not the opacity of the images that are not in the header, you could do this :
header img{
opacity: 0.5; /* Example, set it to whatever you want */
}
This is very basic in CSS and I recommand that you read a few tutorials, all of this should be covered.
Here is a good tutorial for beginners : http://css-tricks.com/how-css-selectors-work/
Here's an example of how you can target different images with a CSS class:
img {
opacity: 0.8;
width:200px;
height:200px;
transition: all 0.2s;
}
img:hover {
opacity: 1;
}
.transparent {
opacity: 0.2;
width:200px;
height:200px;
transition: all 0.2s;
}
.transparent:hover {
opacity: 0;
}
<img src="http://placekitten.com/1000/1000" class="transparent"><img src="http://placekitten.com/1000/1000" class="transparent"><img src="http://placekitten.com/1000/1000" class="transparent"><img src="http://placekitten.com/1000/1000"><img src="http://placekitten.com/1000/1000"><img src="http://placekitten.com/1000/1000">
Hope this helps!
First option: Give the image an ID (or class, or select by its alt-attribute as Josh Burgess makes clear) and add a style rule to reflect its opacity
HTML
<img src="giphy.gif" id="transparent-image" alt="Deal with it!" style="width:500px;height:273px">
CSS
#transparent-image {opacity: 0.4;}
You can also use classes. Classes can be used on multiple elements in a document. IDs should never be used multiple times! A passport is for one individual in the whole wide world. Similarly, an ID is for only one element in your HTML. In your cases it might be useful to use a class so that you can have multiple transparent items with only one class:
.transparent-image {opacity: 0.4;}
Now, when you add the following HTML to an element, it will have this opacity value:
class="transparent-image"
For example:
<img src="giphy.gif" class="transparent-image" alt="Deal with it!" style="width:500px;height:273px">
Second option: Use inline styling
<img src="giphy.gif" alt="Deal with it!" style="width:500px;height:273px;opacity:0.4">
The first option is the best. Inline styles should not be used unless it concerns small chunks that are smaller than an added class would be. In your case, get rid of the inline styles all together and use stylesheets.

How to display image over image on hover with css

I have a gallery of images with links.
Edit: Here's the code I have to work with:
<div class="gallerypagetabs"><img alt="Free Victorian Purse Pattern" src="https://lh3.googleusercontent.com/-m4y6eS2KGRQ/Ug7TKD3sbYI/AAAAAAAAHNc/6qoeuGedjOY/s200-c/free-victorian-purse-pattern-1.jpg"><br>Free Victorian Purse Pattern<img alt="Natural Form Victorian Overskirt" src="https://lh3.googleusercontent.com/-ZrTDaXEOiiU/US__mPzz3dI/AAAAAAAADWQ/eBm3tO3P8oI/s200-c/IMG_5482%255B6%255D.jpg"><br>Natural Form Victorian Overskirt<img alt="Truly Victorian TV221 1878 Underskirt Pattern Review" src="https://lh4.googleusercontent.com/-GmrRTxJ5NGY/UKfO_SQzymI/AAAAAAAAAHA/A9qx6czpyJk/s200-c/Truly-Victorian-TV221-1878-Tie-Back-%255B1%255D%255B4%255D.png"><br>Truly Victorian TV221 1878 Underskirt Pattern Review<img alt="Truly Victorian TV121 Petticoat Pattern Review" src="http://lh4.ggpht.com/-qTsclIxCTKY/UH7fK3jqKII/AAAAAAAAodI/2GaQOVrGuuA/s200-c/Truly%252520Victorian%252520TV121%2525201879%252520Petticoat%252520with%252520Detachable%252520Train%25255B6%25255D.png?imgmax=800"><br>Truly Victorian TV121 Petticoat Pattern Review..ad naseum..</div>
CSS:
.gallerypagetabs a,.gallerypagetabs p{
float:left;
font-size:.80em;
height:250px;
padding:10px;
text-align: center;
width:200px
}
What I'd like to do is show a transparent image with stars on them when someone hovers over the image. So if a person hovers over the Free Victorian Purse Pattern image, they'll see an image of - let's say - five stars indicating that the pattern has received a rating of 5 out of 5 stars from me.
I've tried both of the following with no luck. The code shows the image on hover, but it shows at the bottom of the image instead of overlapping it:
.gallerypagetabs a:hover{
background-image:url('http://i.imgur.com/IKAXZKz.png');
background-position:inherit
}
AND
.gallerypagetabs a:hover{
background-image:url('http://i.imgur.com/IKAXZKz.png');
background-position:inherit;
z-index:10
}
Any advice? I don't want to use Javascript, and I want to add as little coding to the HTML as possible cannot change the html other than adding another class or id at the beginning of it. It all has to be done through CSS. Here's how I'd like it to look. Thanks for your help!
The code that WORKS! (Thanks cimmanon!)
(Changed gallerypagetabs to gallerypatterntab to isolate the class from the rest of the blog. Screenshot from Blogger - yeah Blogger likes to rewrite things like quotations)
You can use a pseudo element for this purpose. No need for extra markup.
http://cssdeck.com/labs/anxnrkhr
<img src="http://placekitten.com/100/100" />
a {
position: relative;
display: inline-block;
}
a:hover:before {
content: '';
display: block;
background: rgba(255, 0, 0, .5); /* your background */
width: 20px; /* image width */
height: 100px; /* image height */
position: absolute;
top: 0;
right: 0;
}
This is untested, but I think you want something like:
.gallerypagetabs a, .gallerypagetabs img{
position:absolute;
z-index:1;
}
.gallerypagetabs a:hover{
z-index:2;
}
.gallerypagetabs{
position:relative;
}
This is untested, but hopefully gives you an idea about how to realize the effect you are after.
Putting the image on the anchor's background isn't going to work because the image will hide it.
You can add an element containing the stars in an absolute position inside the anchor:
<a href="http://costumingdiary.blogspot.com/2013/01/victorian-tardis-purse.html">
<img src="https://lh3.goog...An-purse-pattern-1.jpg" alt="Free.. Pattern">
<br>
Free Victorian Purse Pattern
<i class="stars"></i>
</a>
And a CSS similar to this (all numbers can vary):
a {
position: relative;
}
.stars {
background-image:url('http://i.imgur.com/IKAXZKz.png');
background-position:inherit;
width: 20px;
height: 80px;
position: absolute;
right: 10px;
top: 10px;
display: none;
}
a:hover .stars {
display: block;
}
P.S - <br /> is supposed to be self-closing. And it's better not using it only to make a new line after the image, but maybe give the image this style:
a img {
display: block;
}

Resources