/    Sign up×
Community /Pin to ProfileBookmark

Container size relative to background size

Copy linkTweet thisAlerts:
Jun 27.2019

Hi,
I want to create this effect where I have an img and on top some text.
On hover I want the text to lift up and revel some buttons.
Similar with this example here: https://codepen.io/raul-rogojan/pen/YoEpMx?editors=1100

But I have 1 problem. The images that I used are bigger and if I set their width = 300px for example I won’t know their height and they will get mess up inside the div as I want the images to always bee seen in full. I don’t to set the bg to cover. I hope you understand xd.

Is there a way I can manipulate the container div size after the background size.

So far I tried this but it does not work at all

[code].project-container {
width: 300px;
height: auto;
position: relative;
background-image: url(‘img/hover effect.png’);
background-size: 300px;
background-position: center;
}[/code]

to post a comment
CSSHTML

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@SempervivumJun 27.2019 — This is a general disadvantage of a background image: The container doesn't adjust it's size to the image.

However when you use an image tag inside it does.

This is possible as you have positioned your text and buttons absolutely.

Check if this fits your needs:

https://codepen.io/Sempervivum/pen/XLzRBr?editors=1100
Copy linkTweet thisAlerts:
@codyhillauthorJun 27.2019 — @Sempervivum#1605480 It kinda does. I tried this way but I had some issues with the text. It would keep its positions but apparently if you position the text with top and bottom etc it will be positioned with the top and bottoms of the container... I don;t know why that happens but at least works right now . Thanks ! [upl-image-preview url=https://www.webdeveloper.com/assets/files/2019-06-27/1561642266-147992-1-sdfsds.png]

[upl-image-preview url=https://www.webdeveloper.com/assets/files/2019-06-27/1561642272-278056-2-swdcsd.png]
Copy linkTweet thisAlerts:
@siddhi_patelJul 01.2019 — Hello , May try like this..

``<i>
</i>.container {
position: relative;
width: 350px;
height: auto;
overflow: hidden;
cursor: pointer;
}
.container img {
width: 100%;
height: auto;
}

.text h1 {
margin-bottom: 5px
}<i>
</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,
)...