I have this code where the hidden speech bubble appears when you hover over an image.
http://jsfiddle.net/e4q7K/19/
#container {
background-color: #FF0;
margin: 100px;
float: left;
height: 200px;
width: 200px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
div.hoverbubble {
position: relative;
text-decoration: none;
width:50px;
height:50px;
}
div.hoverbubble span {display: none;}
div.hoverbubble:hover span {
display: block;
position: absolute;
padding: .5em;
content: attr(title);
min-width: px;
text-align: center;
width: auto;
height: auto;
white-space: nowrap;
top: -40px;
background: rgba(0,0,0,.8);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: #fff;
font-size: 0.86em;
font-family: Arial, Helvetica, sans-serif;
}
div.hoverbubble:hover span:after {
position: absolute;
display: block;
content: "";
border-color: rgba(0,0,0,.8) transparent transparent transparent;
border-style: solid;
border-width: 10px;
height: 0;
width: 0;
position: absolute;
bottom: -20px;
left: 1em;
}
<div id="container"><div class="hoverbubble"><img src="test.gif" width="50"
height="50" border="0" /><span>Hidden message here.</span></div>
And i was wondering if there is a way to style the image to this?
width:100%; border:1px solid {color:border}; margin-bottom:6px;
{block:ifroundedsidepic}
-webkit-border-radius:100px; -moz-border-radius:100px; border-radius:100px;
{/block:ifroundedsidepic}
I've tried doing this:
<img src="{image:sidepic}" style="width:100%; border:1px solid {color:border}; margin-
bottom:6px;{block:ifroundedsidepic}-webkit-border-radius:100px; -moz-border-
radius:100px; border-radius:100px;{/block:ifroundedsidepic}"/>
And I've also tried creating an image id, "#kuroko" in the CSS and changed the html to
<img id="kuroko" src="{image:sidepic}" /><span>Hidden message here.</span>
But it did not work. Is there any possible way to style this image?
To style an element right after another one, you need to use the selector : +.
Your case will be :
<img/><span></span>
with the css base :
img + span {
display:none;
}
img:hover + span {
display:block;
}
For the case of using the attribute title and a pseudo element from img , it will not be possible. img and input, for instance, can not generate pseudo elements.
Related
Creating a circle around a letter or text works fine, but in my case I only want to circle a single letter within a word (which is within an H1 tag):
.large {
font-size: 5em;
}
.circle {
border-radius: 50%;
padding: -0.5% 5% 0% 5%;
background: #fff;
border: 10px solid red;
color: red;
}
<h1 class="large">
<span class="circle">e</span>Text
</h1>
Fiddle is here: https://jsfiddle.net/henzen/zwph2nsv/4/
This produces:
Notice that the circle is conforming to the H1 height (I think) - I need it to be compressed vertically, ie the vertical padding needs to be the same as the horizontal, tightly wrapped around the "e".
Is this possible, or would I need to separate the "e" from the "Text" completely in the HTML?
I have tried Unicode chars (eg, ⓔ), which work, but cannot be reliably styled across browsers.
Thanks for any pointers.
You could use a pseudo element.
.large {
font-size: 5em;
}
.circle {
position: relative;
color: red;
}
.circle:after {
content: '';
width: 39px;
height: 44px;
border: 4px solid red;
position: absolute;
border-radius: 50%;
left: -5px;
top: 27px;
}
<h1 class="large">
<span class="circle">e</span>Text
</h1>
use a pseudo element.
Try This: https://jsfiddle.net/2gtazqdy/12/
* {
margin: 0;
padding: 0;
}
.large {
font-size: 5em;
}
.circle {
height: 50px;
width: 50px;
display: inline-block;
padding-left: 20px;
}
.circle::after {
display: inline-block;
height: 50px;
width: 50px;
z-index: 1;
position: absolute;
top: 18px;
left: 4px;
content: "";
color: red;
background: transparent;
border: 10px solid red;
border-radius: 50%;
}
My output:
try this
for your html do <h1> <span> C </span> ircle </h1>
then in the css define your h1 span
and give it padding, in the shape of a rectangle you could use this =
padding: 20px 10px;
then add a border, for example =
border: 5px solid #ddd;
then at last give it a border radius, this is a bit tidious to figure out but just play around with the pixels and you'll eventually get it right how you want it.
for example =
Border-radius: 20px
your html:
<h1> <span> C </span>ircle </h1>
your total css:
h1 span{
padding: 20px 10px;
border: 5px solid #ddd;
border-radius: 20px;
}
If you want to make a circle, the following is needed:
display: inline-block (or display: block)
same width, height and line-height
text-align: center
Use em to correspond with the font-size of the container.
Example
.large {
font-size: 5em;
}
.circle {
display: inline-block;
width: 0.8em;
height: 0.8em;
line-height: 0.8em;
text-align: center;
border-radius: 50%;
background: #fff;
border: 0.05em solid red;
color: red;
}
<h1 class="large">
<span class="circle">e</span>Text
</h1>
Please try this code
.large{
text-align: center;
font: 40px Arial, sans-serif;
color:#000;
font-weight:bold;
}
.circle {
border-radius: 50%;
background: #fff;
border: 6px solid red;
padding: 3px 10px;
text-align: center;
font: 28px Arial, sans-serif;
color: #000;
font-weight: bold;
}
<h1 class="large">
<span class="circle">e</span>Text
</h1>
I want to design a shape as similar as the following image:
Here is my code:
.oval {
width: 100px;
display: inline-block;
height: 50px;
border: 1px solid red;
border-radius: 100px / 50px;
margin-left: -30px;
}
<div class="oval">aaa</div>
I have problem with the shared part.
Using a combination of both pseudo-elements, :before & :after, the intended layout can be achieved, as demonstrated in the embedded code snippet below.
Code Snippet Demonstration:
* {
box-sizing: border-box;
font-family: arial;
}
.oval:not(:first-child) {
margin-left: -30px;
}
.oval {
width: 100px;
display: inline-block;
height: 50px;
border: 1px solid red;
border-radius: 100px / 50px;
text-align: center;
position: relative;
overflow: hidden;
}
.oval:before,
.oval:after {
height: 20px;
width: 25px;
display: inline-block;
position: absolute;
right: 0;
font-size: 10px;
color: white;
}
.oval:before {
content: "C";
border-bottom-left-radius: 100%;
border-bottom-right-radius: 0px;
background: red;
bottom: 5px;
line-height: 15px;
}
.oval:after {
content: "R";
border-top-left-radius: 100%;
border-top-right-radius: 0px;
background: green;
top: 5px;
line-height: 25px;
}
/* Nested anchor tags */
.oval.nested-children:before,
.oval.nested-children:after {
display: none;
}
br + .oval.nested-children {
margin-left: 0px;
}
.oval a {
height: 20px;
width: 25px;
display: inline-block;
position: absolute;
right: 0;
font-size: 10px;
color: white;
z-index: 1;
}
.oval a:first-of-type {
border-bottom-left-radius: 100%;
border-bottom-right-radius: 0px;
background: red;
bottom: 5px;
line-height: 15px;
}
.oval a:last-of-type {
border-top-left-radius: 100%;
border-top-right-radius: 0px;
background: green;
top: 5px;
line-height: 25px;
}
<div class="oval">aaa</div>
<div class="oval">aaa</div>
<div class="oval">aaa</div>
<div class="oval">aaa</div>
<div class="oval">aaa</div>
<br><br>
<div class="oval nested-children">aaaCR</div>
<div class="oval nested-children">aaaCR</div>
<div class="oval nested-children">aaaCR</div>
<div class="oval nested-children">aaaCR</div>
<div class="oval nested-children">aaaCR</div>
Essential Properties:
overflow: hidden declared on containing elements (.oval)
position: relative declared on containing elements (.oval)
position: absolute declared on pseudo-elements
Applicable border-radius properties declared on relevant
pseudo-elements
Reference:
Psuedo-elements:
A CSS pseudo-element is a keyword added to a selector that lets
you style a specific part of the selected element(s). For example,
::first-line can be used to change the font of the first line of a
paragraph.
::after (:after):
In CSS, ::after creates a pseudo-element that is the last
child of the selected element. It is often used to add cosmetic
contentref to an element with the content property.
It is inline by default.
::before (:before):
In CSS, ::before creates a pseudo-element that is the first
child of the selected element. It is often used to add cosmetic
contentref to an element with the content property.
It is inline by default.
.oval {
width: 100px;
display: inline-block;
height: 50px;
border: 1px solid red;
border-radius: 100px / 50px;
}
.shared {
margin-left: -30px;
}
.oval-title {
text-transform: uppercase;
text-align: center;
margin: 0px;
}
<div class="oval">
<p class="oval-title">bcr</p>
</div>
<div class="oval shared">
<p class="oval-title">bod</p>
</div>
Well, how much of the image do you want to emulate? How's this for a start?
.oval {
width: 100px;
display: inline-block;
height: 50px;
border: 1px solid #573;
border-radius: 100px / 50px;
text-align:center;
overflow:hidden;
position:relative;
font:16px/20px 'Arial', sans-serif;
}
.oval.special {
background:linear-gradient(to right, rgba(255,255,255,0) 30%, rgba(128,128,128,.2));
color:#573;
}
.oval:not(:first-child) {
margin-left: -30px;
}
.oval::before {
position:absolute;
display:block;
border-radius: 50px 0 / 25px 0;
top:0; left:70px; width:100px; height:25px;
background:#573 linear-gradient(to right, #463, #683 30%); color: white;
font-size:.625em; line-height:31px;
content:'C';
text-align:center; text-indent:-70px;
}
.oval::after {
position:absolute;
display:block;
border-radius: 0 50px / 0 25px;
bottom:0; left:70px; width:100px; height:25px;
background:red linear-gradient(to right, #722, #A23 30%); color: white;
font-size:.625em; line-height:19px;
content:'R';
text-align:center; text-indent:-70px;
}
<div class="oval special">BCR</div><div class="oval special">BOD</div><div class="oval special">ASR</div><div class="oval special">EMV</div><div class="oval">STE</div><div class="oval">DVR</div><div class="oval">PVR</div>
I'm trying to float a number on the right top of an image.
I want this number to have a background-color and overlay on top of a small portion of the image on the right top corner.
I have tried :
<li class=topoulimg><span id=bell><img src=img-img/bell.png alt=alerts></span><span class=bellnumbers>10</span></li>
css
.bellnumbers{
float:right;
font-size:12px;
background-color:red;
width:10px;
height:10px;
color:#fff;
}
but it is not working.
http://jsfiddle.net/yv5q4gvm/
Use position:absolute instead float:right for your badge (Adjust your needs).
CSS
.bell {
display: inline-block;
position: relative;
width:64px;
}
.bellnumbers {
position: absolute;
font-size:12px;
background-color:red;
width:14px;
height:14px;
color:#fff;
top: -4px;
right: -4px;
}
The float CSS property specifies that an element should be taken from
the normal flow and placed along the left or right side of its
container, where text and inline elements will wrap around it.
DEMO HERE
You can try this...
<span class="bell">
<img src=https://cdn4.iconfinder.com/data/icons/simplicio/64x64/message.png alt=alerts>
<span class="bellnumbers">10</span>
</span>
.bell {
display: inline-block;
position: relative;
background-color: #eee;
width: 48px;
height: 42px;
text-align: center;
padding-top: 6px;
}
.bell img {
width: 24px;
height: 24px;
padding-top: 10px;
}
.bellnumbers {
font-size:12px;
background-color:red;
width:16px;
line-height: 16px;
text-align: center;
color:#fff;
z-index: 2;
border-radius: 3px;
position: absolute;
left: 28px;
}
JSFiddle
Insert content from html attribute (data-count).
<button data-count="16"></button>
Insert content before every <button> element's content, and style the inserted content:
button:before {
content: attr(data-count);
}
See the live example below:
button {
position: relative;
width: 64px;
height: 64px;
margin: 10px;
background-image: url("https://cdn4.iconfinder.com/data/icons/simplicio/64x64/message.png");
background-color: white
}
button:before {
content: attr(data-count);
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
display: block;
border-radius: 20%;
background: #FF9727;
border: 1px solid #FFF;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
color: #FFF;
position: absolute;
top: -10px;
left: -10px;
}
button.bell-top-right:before {
left: auto;
right: -10px;
}
button.bell-bottom-right:before {
left: auto;
top: auto;
right: -10px;
bottom: -10px;
}
button.bell-bottom-left:before {
top: auto;
bottom: -10px;
}
<button data-count="16" class="bell-top-right"></button>
<button data-count="16" class="bell-bottom-right"></button>
<button data-count="16"></button>
<button data-count="16" class="bell-bottom-left"></button>
try this.. perhaps it will solve your purpose (try bootstrap badges that can be a help to)
<li>
<span class=bell>
<img src="https://cdn4.iconfinder.com/data/icons/simplicio/64x64/message.png">
<span class=bellnumbers>10</span>
</span>
</li>
<style>
.bellnumbers{
vertical-align: top;
font-size:17px;
letter-spacing: 3px;
background-color:#F06861;
width:27px;
height:22px;
color:#fff;
border-radius: 3px;
padding-top: 3px;
text-align: center;
position: absolute;
margin-left: -1%;
margin-top: -5px;
}
.bell{
width:64px;
margin-top: 5%;
}
</style>
As others have shown, absolute/relative positioning and 'inline-block' on the li are ideal for this. I've got the code trimmed down quite a bit, however. Demo here: https://jsfiddle.net/r09d314v/
<style type="text/css">
li {
display: inline-block;
list-style-type: none;
position: relative;
}
span {
position: absolute;
top: -8px;
right: -10px;
background: red;
color: white;
padding: 2px;
}
</style>
<li>
<img src="https://cdn4.iconfinder.com/data/icons/simplicio/64x64/message.png">
<span class="number">11</span>
</li>
I have a header photo, and usually they are fairly easy to set up. However, for some reason which I cannot find, the header image floats over the elements of the HTML page.
Any help would be appreciated. I have tried looking for any margins/padding I forgot to delete, but there are none.
Picture of problem...
HTML pertaining to header image:
<div id="gallery">
<div id="imgContain">
<img src="pictures/clubhouse.jpg">
</div>
</div>
My CSS File: (not sure where the problem is, so I posted all of it...)
html, body
{
margin: 0;
padding: 0;
background-attachment: fixed;
background-image: url('.././pictures/04.jpg');
background-color: rgb(56,32,32);
}
#font-face
{
font-family: fancyFont;
src: url('fonts/fancy.otf');
}
#wrapper
{
min-width: 1000px;
margin: auto;
}
#content
{
background-color: white;
display: table;
border-radius: 5px;
bottom: 0px;
left: 0;
margin: auto;
right: 0;
top: 0;
width: 915px;
height: 100%;
box-shadow: 5px 5px 22px black;
}
#content p
{
padding: 25px;
font-family: Arial;
text-indent: 30px;
font-size: 1em;
word-wrap: break-word;
}
center
{
border-bottom: 1px solid black;
}
table
{
border: 1px solid black;
float: left;
}
.main-table /*Main table is the navigation table to the left...*/
{
background-color: white;
margin-bottom: 25px;
border: 4px double white;
width: 245px;
box-shadow: 0px 0px 10px black;
}
.main-table td
{
padding: 10px;
padding-left: 15px;
}
.main-table td a
{
text-decoration: none;
color: black;
font-family: Arial;
transition: .2s;
font-size: .9em;
padding-left: 20px;
}
.main-table td a:hover
{
border-bottom: 1px solid black;
color: black;
padding-left: 50px;
transition: .2s;
}
.main-table h1
{
font-family: fancyFont;
padding:10px;
color: black;
text-shadow: 2px 2px 1px white;
}
.division /*Division(s) are the small info boxes in the center.*/
{
margin-top: px;
margin-left: 40px;
border: none;
margin-bottom: 0px;
}
.division th
{
width: 250px;
background-color: white;
border-bottom: 3px double black;
padding: 10px;
font-family: fancyFont;
}
.division tr td
{
display: inline-block;
width: 250px;
height: 100px;
max-width: 250px;
}
#gallery
{
width: 100%;
height: 100px;
}
#gallery h1
{
font-family: fancyFont;
text-shadow: 2px 2px 1px #acacac;
}
#gallery img
{
width: 100%;
height: 450px;
border-bottom: 1px solid black;
}
table ul li
{
list-style: square;
font-family: Arial;
}
#imgContain
{
background-color: white;
width: 100%;
margin: 0;
padding: 0;
}
#table-container
{
width: 900px;
margin: 0;
}
take out the
#gallery{height:100px;}
css because your gallery img height is 450px and the two conflict.
An element will "float" over another element when the floating element's position is set to absolute. I don't see position: absolute; in your CSS, but I do see positioning styles (bottom: 0px; left: 0; etc.) so maybe another style sheet is applying position: absolute. Best way would be to inspect the elements using a browser inspector like Firefox has and see what CSS styles are being applied. You can send me the URL and I will look at it. If you just want to throw a dart at the board you could try setting this style:
#gallery {
position: static !important;
}
Floating generally happens when position: absolute is set in CSS, but strangely, it's not your case.
So, you can try to add a CSS property to this image, called z-index with the value of -1. It'll possibly work.
This property is a kind of "layers". By default, every element is set in z-index: 0.
So, basically, it'll be:
img {
z-index: -1;
}
or, in this case:
#gallery {
z-index: -1;
}
Sorry if my english is bad.
i am try to dsiplay span text over the image when mouse hover the div.
i am try this.
html
<div id="some-div">
<a href="#"><img class='round_border type_border' src='http://www.jewsnews.co.il/wp-content/uploads/2013/08/Donald_Duck.gif'/>
<span id="some-element">Dounald
</span></a>
</div>
css look like this
<style>
#some-div{
position:relative
}
#some-element {
width:100px;
height:100px;
border: 1px solid orange;
display: none;
font-size: 10px;
bottom: 0px;
left: 0px;
right: 0px;
text-align: center;
text-transform: uppercase;
position: absolute;
top:0;
left:0;
background:rgba(255,79,50,.5);
color:Black !important;
margin-top:2px;
border:1px solid gray;
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
border-radius: 500px;
}
#some-div:hover #some-element {
display: block;
position: relative;
cursor: pointer;
color:#FFFFFF;
}
a{
position: relative;
}
.type_border {
width: 100px;
height: 100px;
background: white;
position: absolute;
}
.round_border {
float: left;
border:1px solid gray;
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
border-radius: 500px;
background: white;
}
</style>
Add position: absolute to span and position:relative to main div
#some-div{
position:relative
}
#some-element {
width:80px;
border: 1px solid #ccc;
display: none;
font-size: 10px;
bottom: 0px;
left: 0px;
right: 0px;
text-align: center;
text-transform: uppercase;
position: absolute;
top:0;
left:0
}
DEMO
Use Title.
<img class='img' title='Donald Duck' src='http://www.jewsnews.co.il/wp-content/uploads/2013/08/Donald_Duck.gif'/>
If you want text to be displayed on mouse hover image.
You can simply do it by using title attribute of html image element
For ex:
You will be able to see that text when mouse hoveered.
Hope this helps..
Unfortunately as far as i know you cannot insert text on the image.
Workaround for this is to have span in a div which is having background image can work
#some-div{
background-image:url('http://www.jewsnews.co.il/wp-content/uploads/2013/08/Donald_Duck.gif');
background-repeat:no-repeat;
}
check this link http://jsfiddle.net/sy6MG/