I have images in a table and want to click on each and have them enlarged on the screen. I can find alot of these snippets online but none I have found allow for writing text over the enlarged images. These pix are artwork and need a copywrite statement on top of them when enlarged. Anyone know either how to do this or where to find it online....thx....David
The only way I can find to add text over an image is to create the image as the background. Setting up a division and table allowed me to only have the background apply to a certain area of the screen.
You can try this code :
<div id="lare_img">
<div class="copyright">Your copy right text here </div><div class="img_file"><img src="img_01.jpg"></div></div>
and style CSS :
<style>
#lare_img{
width:100% // change to your image large width ;
height:100% // change to your image large height;
position:absolute;
}
.copyright{
position:absolute;
bottom:20px;
left:20px;
z-index:999;
}
.img_file{
width:100%;
height:100%;
float:left;
}
</style>
Related
I've built a website using a purchased template and Joomla. I have a corporate logo which shows up perfectly on desktop. It comes up way too big on mobile. This is the following code I have entered.
<p><img src="images/Logomakr_7azv9e.png" alt="" width="100%" height="100%" /></p>
How would I write an if statement so that logo/picture only shows up on desktops and not mobile? Or perhaps to make the logo appear, just smaller?
As others have noted, CSS is the best way to do this.
HTML
Add a class to your image so you can target it and remove the height and width values:
<p><img class="logo" src="images/Logomakr_7azv9e.png" alt="" /></p>
CSS
Set the default values for the size of the logo
.logo{
width:100%;
height:100%;
}
Use #media queries to hide the logo on mobile, adjust the viewport from 767px to whatever you prefer
#media (max-width: 767px) {
.logo{display:none;}
}
You do have other options though. You mention that the logo is too wide on mobile, so instead of removing it completely you could also make it smaller:
#media (max-width: 767px) {
.logo{
width:30%;
height:30%;
}
}
Good luck!
I am designing a site that has images that when hovered over fade a text appears.
I have used the below thread to do this, all went well however when the text I am adding in goes to the full width and height of the image it's going over. I've tried to add padding to the text through my CSS but it doesn't work.
DIV with text over an image on hover
Here is my amended code, amended
CSS
p1{font-size:1.3em;text-align:left;color:#ffffff;font-family: 'geosanslightregular';margin:100px 20px 0px 20px;padding:0;}
div.containerdiv{position:relative}
div.texts{position:absolute; top:0; left:0; width:100%; display:none; z-index:10}
div.texts:hover{display:block}
html
<div class="grid_8">
<a href="cncpt.html">
<div class="containerdiv">
<img src="images/cncpt.jpg" alt="background">
<div class="texts">
<p1>LAUNCH OF E-COMMERCE MENSWEAR STORE, STOCKING EVERYONE FROM BALMAIN AND GIVENCHY TO ADIDAS X OPENING CEREMONY, YMC, NIKE AND BEYOND. BREAK HOSTED THE LAUNCH EVENT AND INTRODUCED 200+ KEY MEDIA, BRAND AND INDUSTRY CONTACTS TO THE STORE. WE CONTINUE TO OPERATE THE PRESS OFFICE FOR CNCPT AND HAVE PICKED UP FANS EVERYWHERE FROM GQ DAILY AND METRO, TO KEY ONLINE INFLUENCERS.</p1>
</div>
</div>
</a>
</div>
<!-- end .grid_8 -->
Still no joy! it's showing the image fine but no text is showing over it or anywhere on the page for that matter!
Any ideas on how to solve this would be greatly appreciated.
Thanks,
John
A simple answer using CSS is to use the :hover pseudo class on an anchor tag.
Set you image container as position:relative in CSS.
Create a div containing your text, formatted using html and CSS inside the image container. Position this absolute in CSS. Absolute positioning positions elements relative to the parent container positioned relative. If no element is set to position relative it will take its position from the body tag. It is important to set a width to the element too.
THE HTML
<div class="container">
<a><img src="img.jpg" alt="background">
<div class="text">I will show on hover</div>
</a>
</div>
CSS
div.container{position:relative;}
div.text{ position:absolute; top:0; left:0; width:100%; display:none; z-index:10;}
a:hover div.text{display:block;}
This will position the text over the container you set to position relative aligning to the top left corner. The z-index stacks elements one above the other. The higher the z-index the higher the element is in the stack.
w3 schools have some excellent definitions and examples on all the code above if it is new to you.
The effect you are after can be achieved with html and css alone. I would advise you focus on:
design your site on paper
layout your page with html and CSS
add your rollover effects and jQuery animations
before adding the jQuery animation
CSS3 transitions are not compatible with all browsers, there are work arounds in CSS though a jQuery fallback is often used.
In my application im trying to load a simple formatted text with some images into QTextBrowser. When im trying to set my image size using :
<img style="width: 128px; height: 128px;" src=":/new/prefix1/Star-five.png"/>
The qtextbrowser is automatically modifying my html and removing "style". Is there something i do wrong? Im setting this style from form editor.
Question asnwered. Need to use width height properties without "px".
Ok.. So I've checked (to the best of my abilities) in the issue list, but haven't found anything similar.. If there is an answer out there, apologies about adding a duplicate...
I am using the Foundation 4 framework, with the latest version.
I have bullets (UL mostly) at a lot of places. However, When I use text-align: center for any text with a bulleted list, the normal text and the list text is center aligned, but the bullets themselves (square, disc and so on) are not.
Now the weird part.... this issue occurs only in Chrome and IE9/IE10. It works as intended on Firefox / Safari. I've also tried using the .text-center class (part of foundation.css) which essentially does the same thing i.e., text-align: center.
Here's the test link http://www.crevolve.com/testing/ ....
Any help is much appreciated... Thank you...
I have bullets (UL mostly) at a lot of places. However, When I use
text-align: center for any text with a bulleted list, the normal text
and the list text is center aligned, but the bullets themselves
(square, disc and so on) are not.
You need to set the list-style-position of your ul, that by default has a value of outside. It means that the bullets will be outside the content flow (read more about it here).
To solve your issue you can do this:
ul.square {
list-style-position: inside;
list-style-type: square;
text-align:center;
}
But hang on that will NOT totally solve your issue, I think, because if you have different length of texts in your ul then everything will be centered. That means they will not be aligned and it will not look good. Look at the first slide on this fiddle to see what I mean.
To have it centered and make it look good you can do the following:
.container {
float:right;
position:relative;
right:50%;
background-color:lightgreen;
}
.inner-container {
float:left;
position:relative;
left:50%;
background-color:lightyellow;
}
ul.square {
list-style-type: square;
width:300px;
}
<div> /* the wrapper div */
<div class="container"> /* outer container to offset by 50% */
<div class="inner-container"> /* inner container to make it center */
<ul class="square">
<li>First Item</li>
<li>Second Item, this is a longer text</li>
</ul>
</div>
</div>
</div>
The working sample is on slide 2 of the sampled jsfiddle. I included a background color so you can better see how it works.
If you want to keep the display of list-style-position: outside, while being able to center you bullet and list content on Chrome:
ul {
list-style-position: inside;
}
ul {
padding-left: 11px;
text-indent: -11px;
}
li {
margin-left: -11px;
}
Downside: 11px is the width of the space bewteen the begining of the bullet and the begining of the text of your li. It's an ugly magic number, that may vary from one browser to another. Il haven't found any way to rationalize it, unfortunately...
I’m trying to create a simple menu where I’ve got four menu items each have an image and then there is a special image for each item that is active.
I’m using Drupal so the HTML output can’t be changed (not easy anyway) so my question is if and how it can be done by using the HTML code provided below:
<div id="quicktabs-2" class="quicktabs_wrapper quicktabs-style-nostyle quicktabs-processed">
<ul class="quicktabs_tabs quicktabs-style-nostyle">
<li class="qtab-0 active first">Question</li>
<li class="qtab-1">Lead</li>
<li class="qtab-2">Board</li>
<li class="qtab-3 last">Ready</li>
</ul>
</div>
I have created some that come close to my final wished result but I’m still having trouble with example to indent the text so it is not showed.
Here is my CSS so far:
ul.quicktabs_tabs li {display:inline; }
#quicktabs-2 li.active a {
background-image:url(question-active.png);
background-position:5px 0px;
background-repeat:no-repeat no-repeat;
padding-bottom:18px;
padding-left:135px;
padding-right:5px;
}
#quicktabs-2 li.qtab-1 a {
background-image:url(lead-grey.png);
background-position:5px 0px;
background-repeat:no-repeat no-repeat;
padding-bottom:18px;
padding-left:29px;
padding-right:50px;
}
#quicktabs-2 li.qtab-2 a {
background-image:url(board.png);
background-position:5px 0px;
background-repeat:no-repeat no-repeat;
padding-bottom:18px;
padding-left:29px;
padding-right:50px;
}
#quicktabs-2 li.qtab-3 a {
background-image:url(ready-grey.png);
background-position:5px 0px;
background-repeat:no-repeat no-repeat;
padding-bottom:18px;
padding-left:29px;
padding-right:50px;
}
This is my code so far and it shows my images correctly with the right spacing between them but the text within the a-href I just can’t get hidden.
I’m fairly certain that it is just a question of hitting the right style-class / id but I’ve tried a lot of different combination and I just can’t get it to work.
Any help would be very much appreciated.
Thank you
Sincere
- Mestika
If you want to hide your text within your anchor tag simply add {text-indent:-9999px} this will move your text to -9999px but will hide your text. This method is called IR - Image Replacement
Edit: Here is a Reference provided by #Faust
It sounds like your main concern is to replace the text in the link (no?).
If you have the access to alter the link text, and you're allowed to include markup with those values that does not get HTML-character encoded,
Then by surrounding each link text with spans ( e.g: Question --> <span>Question</span>), so that each line looks like:
<li class="qtab-0 active first"><span>Question<span></li>
...then you can hide the text with this CSS:
#quicktabs-2 a span {display:none;}
Otherwise, I think your only other recourse is to make the text extremely small and close to the color of the images:
#quicktabs-2 a {font-size:1px;text-decoration:none;color:grey}