For my current use case, I have to set the inner html of my element programatically due to it using markdown:
<div
className='quote-copy'
dangerouslySetInnerHTML={{
__html: body?.childMarkdownRemark?.html,
}}
/>
In this element, I have to make sure a quote icon appears over the first two lines of the set paragraph like this:
However, when trying this, I only managed to get it working on the first line of the paragraph like this:
By using the following code in my scss file:
.quote-copy {
> :first-child {
&::before {
content: '';
overflow: hidden;
display: inline-block;
background: url('../../../assets/icons/quote.svg') no-repeat center;
object-fit: contain;
width: 60px;
height: 40px;
background-size: 60px 40px;
}
}
}
Does anyone know how I can make the quote icon appear over the first two lines of copy?
try to use the "float:left" on your pseudo element
Related
In this example I need to couple an image (or sometimes a word) with two words in a sentence, so that the image shows below these two words. The example comes from a grammar textbook (in Swedish). The only thing I accomplish with this is that the images end up over the text. Does anyone have an idea how to go about this?
Example from printed textbook
HTML:
<p><strong>Verb</strong>: <em>Mamma <span class="pilvIMG">log <u>brett</u></span>.</em></p>
<p><strong>Adjektiv</strong>: <em>Hon var <span class="pilhIMG"><u>mycket</u> glad</span>!</em></p>
<p><strong>Andra adverb</strong>: <em>Sven sprang <span class="pilhIMG"><u>otroligt</u> snabbt</span>.</em></p>
CSS:
.pilvIMG {
background-image: url(pilv.png);
background-repeat: no-repeat;
display: inline-block;
}
.pilhIMG {
background-image: url(pilh.png);
background-repeat: no-repeat;
display: inline-block;
}
You could use the beforepseudo-element.
In the current code below i used the content attribute to show you how it's positioned, but you could also use an background-image for the pseudo-element.
Though you would still need to define the content, just let it empty like content: "";
and you'd propably want to adjust the top and left attributes, but this solution should help you on your way.
edit: NOTE that i set the position for the span classes to relative
.pilvIMG,.pilhIMG{
position:relative;
}
.pilvIMG:before{
content: "->";
position:absolute;
left: 10px;
top: 10px;
}
.pilhIMG:before{
content: "<-";
position:absolute;
left: 10px;
top:10px;
}
<p><strong>Verb</strong>: <em>Mamma <span class="pilvIMG">log <u>brett</u></span>.</em></p>
<p><strong>Adjektiv</strong>: <em>Hon var <span class="pilhIMG"><u>mycket</u> glad</span>!</em></p>
<p><strong>Andra adverb</strong>: <em>Sven sprang <span class="pilhIMG"><u>otroligt</u> snabbt</span>.</em></p>
I have some code which displays images from imgur.
When hovering over an image, I want the title attribute to appear at the top of the image.
I have achieved all of this, but when the text becomes visible, it only appears on one line and writes over itself when it runs out of space, as in the image.
I would like the text to start on a new line once it reaches the end of it's container.
I have tried adding word-wrap: break-word; to each of the CSS selector below, as well as to a P selector (as the link is wrapped in a p-tag).
Any advice on how to resolve this is much appreciated!
I have the following html:
<section id='photos'>
<p>
<a class='hovertext' href='http://i.imgur.com/gallery/eWlGSdR.jpg' title='Opened my window shade while flying over Japan, noticed a volcano was erupting. (OC) [2448x2448]'>
<img src='http://i.imgur.com/eWlGSdR.jpg' alt=''>
</a>
</p>
And the following CSS:
a.hovertext {
position: relative;
text-decoration: none !important;
text-align: left;
}
a.hovertext:before {
content: attr(title);
position: absolute;
top: -1;
padding: 0.5em 20px;
width: 90%;
text-decoration: none !important;
color: red;
opacity: 0.0;
}
a.hovertext:hover:before, a.hovertext:focus:before {
opacity: 1.0;
}
As Dinesh said in the comments, this was caused by poor code awareness, as elsewhere in the code, I was calling 'line-height:0;' on the #photos element.
Removing this solved the problem.
i think you coul use some java script on this, if you only want to make it add a extra line to it, correct me if im wrong.
Here's an example what i think you mean:
First add this text next your class="hovertext" :
id="HoverText"
Add this part after your body or paste the code between script into a .js file and call it with
<script src="filename.js"></script>
<script>
HoverText=document.getElementById("HoverText");
HoverText.onclick=function(){ClickToShowText()};
function ClickToShowText(){
HoverText.innerHTML+="<br>New line with text";
}
</script>
just use the break tag at the end of the text that's supposed to be on the first line.
</br>
easy
.responsive td.head1:before {
content: url(myimage.png )
}
I want to put an image into a responsive table column (I'm using this to put the column titles as rows in a similar manner described at CSS Tricks here. The difference is that my 'headings' contain images. Those images need to be rescaled to fit, and I seem to be drawing a blank using such things as background-size. So is there any way to rescale/resize the image?
Update: Thanks for your suggestions about using a background-image - you get bonus points if someone can tell me a way of getting an image in a :before segment with an alt/description tag for disability compliance.
You can give the class a background image and style it. Try this...
name{
background-image:url("url here");
background-size:80px 60px;
}
Append a background image to this item, like here: http://jsfiddle.net/4rB5X/1/
.responsive th:nth-child(1):before {
content: "";
position: relative;
display: inline-block;
width: 30px;
height: 30px;
background-image: url(http://www.placehold.it/30x30);
background-repeat: no-repeat;
background-position: top left;
vertical-align: middle;
}
th
{
vertical-align: middle;
}
To address your question with the alt Tag for these images:
You may indeed use content for an pseudo alt-tag. You can use an attribute to define the desired text. Here is an exampe:
http://jsfiddle.net/4rB5X/2/
CSS
/* Puts the data-img-alt value of the <th> as content */
.responsive th:nth-child(1):before {
content: attr(data-img-alt);
}
/* Hide Text from content */
th.hide-text:before
{
text-indent: -99999px;
overflow: hidden;
text-align: left;
}
HTML
<thead>
<th class="hide-text" data-img-alt="Lalala">Test</th>
<th>Test</th>
</thead>
Update:
Like #vogomatix pointet out, the content property must not be null, but at least an empty string (content:""; would be ok). To have a workaround, try this:
th:before
{
content: "";
}
th[data-img-alt]:before
{
content: attr(data-img-alt);
}
I want to put one image and one block with two in one line,
but if use float on image,
it will be out of that big block' border.
I don't want to add height to the big block,
because sometimes image doesn't exit.
like this link: images and (p1 + p2 ) in one line.
http://verygif.com/bbs/b/src/138002270032.jpg
sorry for can't post images.
big_block {
border:2px solid #333;
}
<div class="big_block">
{if img exit }<img .... />{/if}
<p>sometext,sometext,sometext,sometext</p>
<p>fulltext,fulltext,fulltext,fulltext</p>
</div>
Just declare overflow: hidden; on the parent <div> container. That will clear the float and ensures that the image does not go beyond the parent's borders by ensuring that the parents wrap around the paragraphs AND the image.
See example here: http://jsfiddle.net/teddyrised/8aeAL/
You can try using display: inline to <p> tags,
p {
margin: 0;
padding: 0;
display: inline;
}
Check this http://jsfiddle.net/tpD2u
I always use something like this:
.big_block img { float: left; }
.big_block:after { display: block; cler: both; content: " "; }
http://jsfiddle.net/QWm4T/
i have two images of text. one with regular text and the other with the same text but with glow effect.
the thing is i want the glow image to replace the regular one while hover.
but instead the glow image appears in addition to the regular one.
please help!!
thanx in advance
here is the code... the background-image attribute is in a comment block because the regular text image is defined as the img src int the html file
#groundPlainLink
{
height:56px;
width: 170px;
margin-left:476px;
float:left;
/*background-image:url("../images/txt_menu_ground_plane_pc.png");*/
}
#groundPlainLink:hover
{
background-image: url("../images/txt_menu_ground_plane_glow_pc.png");
}
It appears in addition, because the IMG element renders above the background image. Why not just use CSS, and skip the IMG element?
You have to hide the image on hover.
#groundPlainLink img:hover { opacity:0; }
However, as mentioned above, it'd be easier and simpler to remove the img and rely on background images for this.
EDIT: Or, style the element instead of the div element, then put text inside the link with a font-size:0. That'd do what you're looking for and still be good for screen readers/accessibility/SEO.
a fiddle
https://jsfiddle.net/Hastig/jd23mcnx/
html
<a class="image-link">
<img class="image-default" src="http://i.imgur.com/c0lfxLU.png">
<img class="image-hover" src="http://i.imgur.com/yfNIfVR.jpg">
</a>
css
.image-link {
display: block;
width: 500px;
margin: 20px auto 0px auto;
}
.image-link img {
width: 500px; height: 300px;
}
.image-hover {
display: none;
}
.image-link:hover .image-default {
displaY: none;
}
.image-link:hover .image-hover {
display: block;
}