I'm using Adobe Dreamweaver CS5 and I added a swap behavior to an image in an html document. Basically, the swap property is supposed to pop up at its original size and restore on mouse out. The problem I'm facing is that the image swapped fills the screen. I've tried adding width: px and height: px properties to the img src string but that didn't work either. Here's the snippet:
<div class="caption lft glow2" data-x="600" data-y="615" data-speed="600" data-start="200" data-easing="easeOutExpo"><img src="img/glow.png" onMouseOver="MM_swapImage('Image1','','img/intro-1.jpg',1)" width="131" height="124" onMouseOut="MM_swapImgRestore()"></div>
and here's the css:
.caption.glow2 {
position: absolute;
padding: 6px 10px;
margin: 0px;
border-width: 0px;
border-style: none;
background: transparent;
opacity: 5;
Please help
Solved! I made a rollover instead. Thank you!
Related
I am using a Joomla theme by rockettheme and I was able to find and reproduce a class of that theme in the demo-styles.less file of the template.
So I made a demo-styles-custom.less for my website and added the following code into it:
// Demo Image
.al-image {
position: relative;
}
.al-image img {
max-width: 100%;
height: auto;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.2);
}
.al-image object {
max-width: 100%;
height: auto;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.2);
}
// MainBottom Images
.al-image-description {
color: #fff;
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index:1000;
.transition(opacity 0.5s ease-out);
span {
margin-top: 25px;
margin-left: 15px;
line-height: 0.5em;
}
h4 {
padding: 0 15px;
margin-top: 15px;
margin-bottom: 8px;
font-family: 'SourceSansProExtraLight',Helvetica,Arial,sans-serif;
font-size: 2.8em;
font-weight: normal;
line-height: 1.1em;
}
p {
padding: 0 15px;
font-size: 1.5em;
}
a.readon {
margin-left: 15px;
span {
margin-left: 0;
}
}
}
.al-image:hover .al-image-description {
background-color: rgba(1, 197, 255, 0.3); //#01C5FF
// color: #FFFFFF;
bottom: 0;
opacity: 1 !important;
}
That Creates a very nice tile which when hovered over displays the contents of al-image-desciption and displays a "read more" button which is clickable. The a.readon at the bottom there is defined in the styles files of the joomla template I'm using so no need to worry about that.
Anyway, it works great with an img, however if I wanted to add some text it doesn't work as good. I added the object parameters (at al-image object{}) and it creates the text but when hovering the description only covers the small text I'm using. Not the whole square area the image was occupying. I thought I could add a background image and have the text placed on top of that image but background images do no respond the same as images. They are confined to the size of the text. The result is really ugly and you can see that in the attached images below.
Is there a way to make text use the same space as an image? I want it to work as all the other image tiles, just have the ability to write text on it.
(it seems that I need 10 rep to post images so I will only post the links to them)
Image 1 When I hovered the tile I want to fix and next to it are the tiles that work ok with plain images
Image 2 when I hovered over one of the tiles that work, (plain images) to show description and not hovered the tile I want to fix
From the images you can see that the tile that's not working for me has a compressed background image. The HTML code I used to create the tile in a module is the following:
<div class="al-image">
<object id="image-with-text" style="background-image: url('/images/Stores/CoverSQ.jpg');">hello all</object>
<div class="al-image-description">
<span class="icon-shopping-cart rt-big-icon"></span>
<h4>Store</br>Renovation</h4>
<p>fast delivery times</p>
<a class="readon" href="index.php/en/activities/store-renovation"><span>Read More</span></a>
</div>
</div>
While for the rest of the tiles, the code used there is:
<div class="al-image">
<img src="/images/Office_Renovations/CoverSQ.jpg" alt="Office Renovation" />
<div class="al-image-description">
<span class="icon-group rt-big-icon"></span>
<h4>Office</br>Renovation</h4>
<p>Uninterruptable deploy®</p>
<a class="readon" href="index.php/en/activities/office-renovation"><span>Read More</span></a>
</div>
</div>
Hope I described it well. I would appreciate any help I can get.
Thank you.
i think it would solve your problem if you just use position:absolute;, width: 100%; and height: 100%; on your object element. And define width and height on the al-image container ... or just define them on the object. Something along the lines of this fiddle:
http://jsfiddle.net/WQEAW/
ok I seem to have found a solution to my own problem! That should help people facing the same problem...
I found that I can do what I need using the followin code:
<div class="al-image">
<object id="image-with-text">
<img src="/images/Stores/CoverSQ.jpg" alt="image" />
<div style="position:absolute; top:50px; left:20px; width:60px; height:25px">
<center>
<font size="+2" color="00ff00">Looking Into The Future</font>
</center>
</div></object>
<div class="al-image-description">
<span class="icon-shopping-cart rt-big-icon"></span>
<h4>Store</br>Renovation</h4>
<p>fast delivery times</p>
<a class="readon" href="index.php/en/activities/store-renovation"><span>Read More</span></a>
</div>
</div>
That code will display the text "Looking Into The Future" at the position 50,20 off the top left part of my image with a width of 60 pixels.
You can also use percentages for that for example:
<div style="position:absolute; top:30%; left:20%; width:40%; height:25px">
Which will help when resizing the browser for a responsive theme.
Cool. Now all I need to do is make the images I need and use transparency and it should work!
I want to thank all those who gave time to my question even though they didn't find the solution. Besides it only was here for a few hours.
I also want to thank Martin Turjak who gave an answer. It was the correct one too. I had found the solution a bit before he answered, however I had to wait for 8 hours to post it here as a solution. I'm posting it anyway cause I believe that with the included code it's much more useful to people facing the same problem. I believe that it will also work for many of the rockettheme's templates so feel free to use it.
If anyone wants I can send the custom .less files I made for my theme and they can use them as they are, without worrying about the coding at all. Of course you need to be using the theme for them to work but I believe that there are enough people out there with the rockettheme's template.
I've looked around for a while now and can't find a solution that solves this particular problem. I have an image (<img...>)on a webpage and when the image loads it has a 1px solid white (or very light grey) outline/border on the outside edge of the image. It's not around the image but on the outermost pixels.
The associated CSS is as follows:
cursor: pointer;
display: inline-block;
float: left
I've tried using
border: none
border: 0
outline: none
outline: 0
-webkit-border-before: 0px solid #fff
-webkit-border-after: 0px solid #fff
and am stumped, the only way I've gotten part of the white line to disappear is by increasing the border radius to cut off the corners of the image. I've verified and re-verified that this outline is not on the image.
The original image:
The div containing this image (and other similar images without the same problem) has css as follows (if this helps):
text-align: center;
height: 60px;
display: inline-block;
position: absolute;
width: 270px;
bottom: 0px;
left: 0px;
padding: 0px 20px;
Finally found the solution!
I originally had it as an img containing a class that referenced the image in our sprite sheet. By changing the img tags to a div and keeping the original reference, the borders were removed and the sprite correctly displays.
You could try this:
border-width: 0px;
I'm creating PHP, Javascript based photo-gallery from scratch
The problem is, I want to make difference between simple picture and photo-album.
So simple picture borders look like that
Is that possible to create facebook like photo-album borders (double borders, which creates multiple images effect) via css or CSS3?
P.S Don't know if it will be possible with old css standarts. I mean, CSS3 probably can do it but it will not be backward compatible. In other hand, currently my php side generates 100x100 px thumbs. I need something that will not be ruined if I will increase size of thumbs.
Thx in advance
Use a pseudo element like :before or :after, for example:
Turns out, most browsers don't like :before on images because it's not a text-containing element. You could still do this if you did it on an alternative element, like a div, and set the div's background to the original image. Or, you could try:
http://jsbin.com/otivaj/edit#html,live
Is this what you're looking for?
jsfiddle
HTML:
<div class="facebook-album"></div>
CSS:
.facebook-album, .facebook-album:before
{
background: red;
width: 100px;
height: 100px;
margin: 20px;
border: 3px solid #FFF;
box-shadow: 0 0 0 1px #999;
position: relative;
}
.facebook-album:before
{
margin: 0;
content: "";
position: absolute;
top: -7px;
left: -7px;
background: white;
z-index: -1;
}
You could just look at Facebook's source to figure it out. This will also work:
http://jsfiddle.net/g9A6a/
Yep, you can definitely do this with CSS. It looks like all your images are the same size, too, which will make this very straightforward. Simply place your <img> inside a containing element with position: relative; and an offset. Both the container and image should have a border, with padding and offsets you so desire. Set the width and height of the containing element based off the child image's dimensions.
Here is a
DEMO on jsfiddle
I'm not sure you can achieve that effect with simply CSS2. If adding more markup is an option, I would do something like this:
<ul>
<li><img></li>
</ul>
li {
position: relative;
border: 1px solid gray;
}
img {
padding: 6px;
border: 1px solid gray;
position:absolute;
top:6px;
left: 6px;
background-color:white;
}
I have some problems with CSS and z-index. Let me show you an example
Suppose that on a first moment it only appears the tag pointers. Then, when I click one of this pointers appears a tag globe. I want that the tag pointers appears always under the tag globes, and I want too that every time I open a tag globe it appears over all other tag globes opened.
My div structure is:
<div id="t01" class="tag">
<div class="small">
<div class="globe">
<div class="in-globe">
<!--tag globe content-->
</div>
</div>
<div class="globe-arrow"></div>
</div>
</div>
And the related CSS code is this:
.tag {
z-index: 3;
position: absolute;
left: 0; /*JavaScript modified*/
top: 0; /*JavaScript modified*/
width: 19px;
height: 26px;
padding: 0 11px 10px 15px;
background: url('../../images/zoom/tag.png') no-repeat center;
}
.small {
cursor: pointer;
width: 19px;
height: 26px;
}
.globe-arrow {
position: absolute;
left: 23px;
bottom: 30px;
width: 8px;
height: 6px;
background: url(../../images/zoom/tag_arrow_UR.gif) no-repeat;
z-index: 5;
}
.globe {
position: absolute;
left: 23px;
bottom: 30px;
z-index: 4;
}
.in-globe {
font-size: 11px;
margin: 0 0 3px 3px;
padding: 3px;
background: #FFF;
border: 1px solid #000;
}
The 'tag' is all the conglomerate, and its background is the tag pointer image. However, this image has some shadows and I only want that a certain zone can be clicked. Then, the 'small' div has this function. The 'globe' and 'in-globe' divs are where the content of the globe is written (it could be an only div, there are two for historical reasons), and the 'globe-arrow' div is basically a little image to show this small arrow over the globe.
With this structure it doesn't work. In a same conglomerate, a globe is always over a tag, but an entire conglomerate defined before in the html code appears entirely under a newer one. In the same way, although a globe is inserted by JavaScript always after an older one (logically) the tag conglomerate is inserted when the page is loaded and then the overlapping works like I said.
Can you propose an smart way to reach my objective? Think that I'm interested on positioning the globe respective to the tag, because when I drag a pointer with a globe opened I want that the globe moves with it by CSS, not by JavaScript.
give .globe-arrow a z-index of 3
I solved the problem. There's no magic way to do it. I had to change the way I structure tags. It seems that z-index inherits from the container div, then like the parent has less z-index, a son of another parent with the same z-index appears under the first although this son has a bigger z-index. It's very confusing, yes.
In few words, I define a tag-container (to positionate the tag), into it I define a pointer and a tag globe. The first with less z-index than the second. Now, as all the divs with z-index has the same level all tag globes appear over all tag pointers.
I want that every time I open a new tag globe it appears over the opened globes. Against my desires, I had to use JavaScript for this because with a same z-index the browser show over the last defined div. This is ugly. I build a stack of z-index's that increases with more globes and decreases when I close them. Then I simply edit the css dinamicaly to put this new z-index to the new globe.
Thank you for your attention and help :) I hope this could be useful for somebody.
Chrome and Safari are displaying a border around the image, but I don't want one. There is no border in Mozilla. I've looked through the CSS and HTML, and I can't find anything that is fixing it.
Here is the code:
<tr>
<td class="near">
<a href="../index.html"class="near_place">
<img class="related_photo" />
<h4 class="nearby"> adfadfad </h4>
<span class="related_info">asdfadfadfaf</span>
</a>
...
CSS:
a.near_place {
border: none;
background: #fff;
display: block;
}
a.near_place:hover{
background-color: #F5F5F5;
}
h4.nearby {
height: auto;
width: inherit;
margin-top: -2px;
margin-bottom: 3px;
font-size: 12px;
font-weight: normal;
color: #000;
display: inline;
}
img.related_photo {
width: 80px;
height: 60px;
border: none;
margin-right: 3px;
float: left;
overflow: hidden;
}
span.related_info {
width: inherit;
height: 48px;
font-size: 11px;
color: #666;
display: block;
}
td.near {
width: 25%;
height: 70px;
background: #FFF;
}
Sorry, I copied some old code before. Here is the code that is giving me trouble
Thanks in advance
Now I don't know if this is a bug with Chrome or not but the grey border appears when it can't find the image, the image url is broken or as in your case the src isn't there. If you give the image a proper URL and the browser finds it then the border goes away. If the image is to not have a src then you will need to remove the height and width.
sarcastyx is right, but if you want a workarround you can set the width and height to 0 and a padding to make space for your image.
If you want a icon of 36x36, you can set width and height to 0 and pading:18px
I know it is an old question. But another solution is to set the src to a 1x1 transparent pixel
<img class="related_photo"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
This works for me.
.related_photo {
content: '';
}
This may happen when the image is planted dynamically by css (e.g. by http://webcodertools.com/imagetobase64converter) in order to avoid extra HTTP requests. In this case we don't want to have a default image because of performance issues. I've solved it by switching from an img tag to a div tag.
img[src=""]{
content: "";
}
Lazy image solution (img loading="lazy")
If you are using lazy image loading you may notice this thin thin border before the image has loaded more than if you didn't.
You're more likely to see this for a horizontal scrolling gallery than a normal vertical scrolling webpage.
Why?
Lazy loading unfortunately only works on the vertical axis. I'm assuming this is because there's a high likelihood that you're going to scroll down, but not left to right. The whole point of lazy loading is to reduce images 'below the fold' from consuming unnecessary bandwidth.
Soution 1:
Detect when the user has scrolled (eg. using intersection observer) and then set loading="eager" on each image you want to immediately load.
I haven't actually tested this, and it's possible some browser's won't immediately load images - but it should be fine.
Solution 2:
Detect when the image has finished loading loaded and then fade it in.
img.setAttribute('imageLoaded', 'false');
img.onload = () =>
{
img.setAttribute('imageLoaded', 'true');
};
Then with css hide the image until it's loaded, after which it fades in nicely:
img
{
opacity: 1;
transition: opacity .5s;
}
img[imageLoaded='false']
{
opacity: 0; // hide image including gray outline
}
Also this behavior is subject to change, the browser may be clever enough to detect a horizontal scrolling element in future - but right now Chrome and Safari both seem to have a zero pixel window for looking for horizontal lazy images.
img.related_photo {
width: 80px;
height: 60px;
**border: solid thin #DFDFDF;** //just remove this line
margin-right: 3px;
float: left;
overflow: hidden;
}
Inside img.related_photo, you need to change border: solid thin #DFDFDF; to border: 0.
I have fixed this issue with:
<img src="img/1.jpg" style="height:150px; position: absolute; right: 15px;">
The right: 15px is where you want the image to be shown, but you can place it where you want.
I just added src="trans.png", trans.png is just a 100x100 transparent background png from photoshop.
Worked like a charm no borders
To summarise the answers given already: your options to remove the grey border from an img:not([src]), but still display an image using background-image in Chrome/Safari are:
Use a different tag that doesn't have this behaviour. (Thanks #Druvision) Eg: div or span. Sad face: it's not quite as semantic.
Use padding to define the dimensions. (Thanks #Gonzalo)Eg padding: 16px 10px 1px; replaces width:20px; height:17px; Sad face: dimensions and intentions aren't as obvious in the CSS, especially if it's not an even square like #Gonalo's example.