Image and Text all in one line - css

Hey guys I have a page here:
where I want the flag the h3 to be in one perfect line:
<h3>CONTACT MY AGENT</h3>
<img src="http://gringlishgirl.com/test/wp-content/uploads/2016/11/canada.png" align="left" />
<h3 style="font-size: 20px; padding-bottom: 5px;">CANADA</h3>
<strong>Film Comm Talent & Model Agency</strong>
http://filmcomm.ca/
Hudson’s Bay Centre
Bloor Street East. Suite 3500
Toronto, ON M4W 1A8
phone: 416-915-3103
email: agents#filmcomm.ca
I used align="left" to make it happen and work with padding-bottom but no effect.
Any idea how to put them on one line like this perfectly??:

Consider something like:
<div class='canada-wrapper'>
<img src='http://gringlishgirl.com/test/wp-content/uploads/2016/11/canada.png'>
<h3>CANADA</h3>
</div>
And your CSS:
.canada-wrapper {
// keep absolute positioning of the image within the wrapper
position: relative;
}
.canada-wrapper img {
// position 50% from the top, and offset by -50% using transforms
left: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
.canada-wrapper h3 {
// push the text to the right of the image
// (fine tune as desired)
margin-left: 48px;
}
The magic here is transform: translateY, which will perfectly vertically align the image - regardless of the size of the text next to it. It surprisingly has good cross-browser support (modern browser and IE9+). You'll just need to prefix accordingly with -moz, etc.
JSFiddle (does not include webfonts): https://jsfiddle.net/6q7tLucn/

You can use vertical-align for the image
img.your_class {
vertical-align:-2px;
}

Well... I looked at the HTML and it looks like your <img /> is inside of a <p> tag.
One thing you can do is give the <p> tag and the <h3> tag a class of "inline-insertwhateverhere" and then give that class the following rule:
.inline-elements {
display: inline-block;
margin: 0;
padding: 0; /* just in case; remove if unneeded */
vertical-align: middle;
}
Then you can play with the margin, padding, maybe mess with the height to make it look like you want. You may end up giving the <p> tag and the <h3> tag separate class names, such as "ca-flag" and "country-name" and then replace
.inline-elements with .ca-flag, .country-name so you can customize each element more specifically.

You may just add float:left to your image tag.
HTML
<div>
<img src="http://gringlishgirl.com/test/wp-content/uploads/2016/11/canada.png" class="ClsImg"><h3>CANADA</h3>
</div>
CSS
.ClsImg{
float:left;
}
FIDDLE

Apply the below styles
.wpb_wrapper p + p{
clear: both;
}
.wpb_wrapper h3 + p {
clear: both;
float: left;
margin: 0 5px 0 0;
width: auto;
}
.wpb_wrapper h3 + p + h3, .wpb_wrapper h3 ~ p + h3 {
clear: none;
padding: 0;
line-height: 24px;
}

Related

Hover caption on image causes big white gap below image

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!

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.

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;
}

Avoiding copying CSS styles that stay the same for different divs

#world1 {
background: url(/images/home/1.jpg) 0 0 no-repeat;
float: left;
width: 2%;
height: 4%;
position: absolute;
top: 0%;
left: 0%;
z-index: -1;
margin-top: -20px;
margin-left: -20px;
}
#world1:hover {
background-position: 0 -40px;
cursor: pointer;
I have many (about 100) of these #world(number) divs on a single page. The only thing that changes are the top and left values and the background jpg source. Everything else is the same so clearly it is a huge amount of code. Is there some way I can avoid copying the content that remains the same between all divs and only change the absolute position and background source of each individual div?
Thanks
Also give the div a class, for example: class="worlds".
And put all the generic styling in that class
.world { generic styling }
#wordl1 { custom styling }
Would it be acceptable to add a shared class to all of the #worldN divs?:
.world { /* Styles general to class="world" */ }
#world1 { /* Styles specific to id="world1" */ }
#world1:hover { /* Styles specific to id="world1" hover state */ }
#world2 { /* Styles specific to id="world2" */ }
#world2:hover { /* Styles specific to id="world2" hover state */ }
And in your HTML:
<div class="world" id="world1"></div>
<div class="world" id="world2"></div>
Use classes for common style for all divs, and id's for unique style:
HTML:
<div class="myClass" id="div1" />
<div class="myClass" id="div2" />
<div class="myClass" id="div3" />
<div class="myClass" id="div4" />
CSS:
.myClass
{
///all your repeating CSS
}
#div1{}
#div2{}
#div3{}
#div4{}
You can group same rules of many elements with their class: http://www.w3.org/TR/html4/struct/global.html#h-7.5.2
ID will be used to apply UNIQUE styles.
Yes, just put everything that's common into a div css optionally giving it a class that the div must include then just add the specialist css to each world div. Note you can also do class="class1 class2 class3" to use more than one css class.
Take a loot at http://sass-lang.com/

Resources