/    Sign up×
Community /Pin to ProfileBookmark

Content size in Pseudo Elements.

Copy linkTweet thisAlerts:
Sep 06.2019

In my portfolio under the portfolio section, I have smaller img that are displaying my logos illustrations etc. I also have a hover effect on them that was made with the pseudo-elements to save HTML code. The problem is that the content text and img are really big. Any tips on how I can fix this?
https://rogojan-raul-portfolio.netlify.com/

here is the code

[code]
 .card {
cursor: pointer;
transition: all 200ms ease;
}
.card::before {
content: “CLICK ME!” url(“img/Clicked svg.svg”);
font-size: 1.3rem;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
font-weight: 800;
color: white;

opacity: 0;
transition: all 200ms ease;
}
.card:hover::before {
opacity: 1;
}
[/code]

to post a comment
CSSHTML

11 Comments(s) ↴

Copy linkTweet thisAlerts:
@JMRKERSep 06.2019 — Where have you defined your 'height' or 'width' for the images anywhere in that bit of code?
Copy linkTweet thisAlerts:
@codyhillauthorSep 07.2019 — @JMRKER#1608466 <i>
</i> .logo-card,
.illustrations-card,
.t-shirts-card {
width: 250px;
height: 250px;
background: #555;
margin: 0;
}
.logo-card img,
.business-cards-card img,
.illustrations-card img,
.t-shirts-card img,
.web-sites-card img,
.study-cases-card img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

Here,

.card is a secondary class.
Copy linkTweet thisAlerts:
@JMRKERSep 07.2019 — Where exactly in you portfolio link is the problem manifested?

Can you isolate on the specific area(s) to assess?
Copy linkTweet thisAlerts:
@codyhillauthorSep 08.2019 — @JMRKER#1608490 I said that in the original post. Under the portfolio section, the thumbs hover effect. The small img from all the section. "Logos, Business Card, Illustration, T-shirts". I created the hover effect with pseudo-elements and I can not change the dimensions of the content. [upl-image-preview url=https://www.webdeveloper.com/assets/files/2019-09-08/1567925108-360269-untitled.png]
Copy linkTweet thisAlerts:
@JMRKERSep 08.2019 — Don't know if this is the problem, but the image is created by some SVG code whereas some of the others are JPG images.

Does the same problem occur with the images as with your problem link?

Have you looked at the SVG code to see if there need to be some changes to modify the display size on hover?
Copy linkTweet thisAlerts:
@codyhillauthorSep 08.2019 — @JMRKER#1608499 The hover effect it's on the container not the img. It shouldn't be any difference between the SVGs and JPEGs . The problem is the SVG img from the content. content: "CLICK ME!" url("img/Clicked svg.svg");

The SVG is added via CSS not HTML and I don't know how to change its size.
Copy linkTweet thisAlerts:
@cootheadSep 08.2019 — Hi there RaulRogojan,

try changing this...

``<i>
</i> .card::before {
content: "CLICK ME!" url("img/Clicked svg.svg");
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
font-weight: 800;
color: white;

opacity: 0;
transition: all 200ms ease;
}
.card:hover::before {
opacity: 1;
}<i>
</i>`</CODE>

...to this..

<CODE>`<i>
</i>.card::before {
content: "CLICK ME!" url("img/Clicked svg.svg");
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
width: 40%; /*adjust value to suit */
transform: translate( -50%, -50% );
font-weight: 800;
font-size: 0.8em; /* adjust value to suit */
color: white;
opacity: 0;
transition: all 200ms ease;
}

.card::after {
content: '';
position: absolute;
z-index: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
transition: all 200ms ease;

}

.card:hover::before,
.card:hover::after {
opacity: 1;
}<i>
</i>``

_coothead_
Copy linkTweet thisAlerts:
@codyhillauthorSep 08.2019 — @coothead#1608502 Thx man! With a few adjustments, it works perfectly. It also works across browsers now!
Copy linkTweet thisAlerts:
@cootheadSep 08.2019 — Hi there RaulRogojan,

you might want to consider using...

``<i>
</i>.card:hover::before,
.card:hover::active,
.card:active::after,
.card:active::after {
opacity: 1;
}<i>
</i>``
...for devices that don't accept _hover_. ;)

_coothead_
Copy linkTweet thisAlerts:
@codyhillauthorSep 08.2019 — @coothead#1608504 Og yeah, Forgot about that. TY!
Copy linkTweet thisAlerts:
@cootheadSep 08.2019 — No problem, you're very welcome. ;)


[i]coothead[/i]
×

Success!

Help @codyhill spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.12,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...