I am a beginner and had to create a website as a project for my Master’s class.
http://magicalplanning.great-site.net
When I look at the website by right-clicking opening my HTML files in my browser, one of the linked texts I have show up as links/dark colors. On my InfinityFree website, it only shows up as white text unless it is clicked? I’m not sure what to do to fix this or why they are different? There are no other inconsistencies in my website vs my html browser view.
Thanks!
Can you share a screenshot perhaps? I cannot find any errors from my end!
Sure! When I hover over the images, they become transparent white in order to read the text better.
Here is my website open on Safari:
I see the links in blue color. Maybe check your CSS code? Or mind sharing it here?
Here is my CSS for the “polaroid” functions.
.polaroid {
width: 250px;
color: #3b444b;
background-color: white;
font-size: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
display: inline-block;
margin-top: 100px;
margin-left: 170px;
margin-bottom: 50px;
position: relative;
width: 250px;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 42%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.polaroid:hover .image {
opacity: 0.3;
}
.polaroid:hover .middle {
opacity: 1;
}
a.polaroid {
color: black;
font-size: 16px;
}
.container {
padding: 10px;
text-align: center;
font-weight: bold;
}.
You have put a text class in middle, but I don’t see any reference to that in your code.
Here is my HTML if that helps. Thank you for helping. Again, sorry if this is horrible I am learning!
<div class="polaroid">
<img src="https://castleinsider.com/img/cat/318.jpg" alt="Disneyland, CA" class="image" style="width:100%">
<div class="middle">
<div class="text">
<a href="https://disneyland.disney.go.com/tickets/">Parks & Tickets</a>
<p><a href="https://disneyland.disney.go.com/hotels/">Places to Stay</a></p>
<p><a href="https://disneyland.disney.go.com/things-to-do/">Things to do</a></p>
</div>
</div>
<div class="container">
<p>Disneyland, CA</p>
</div>
</div>
<div class="polaroid">
<img src="https://static-s.aa-cdn.net/img/amazon/30600000033355/ac3e0f4b01dc77f2ac86abe6ac3c490d?v=1" alt="Disney World, FL" class="image" style="width: 100%">
<div class="middle">
<div class="text">
<a href="https://disneyworld.disney.go.com/admission/">Parks & Tickets</a>
<p><a href="https://disneyworld.disney.go.com/resorts/">Places to Stay</a></p>
<p><a href="https://disneyworld.disney.go.com/things-to-do-orlando/">Things to do</a></p>
</div>
</div>
<div class="container">
<p>Disney World, FL</p>
</div>
</div>
<div class="polaroid">
<img src="https://cdn1.parksmedia.wdprapps.disney.com/resize/mwImage/1/1300/544/75/dam/disney-cruise-line/homepage/aquaduck-slide-1x1.jpg?1630591854312" alt="Disney World, FL" class="image" style="width: 100%">
<div class="middle">
<div class="text">
<p><a href="https://disneycruise.disney.go.com/ships/">Explore Ships</a></p>
<p><a href="https://disneycruise.disney.go.com/cruises-destinations/itineraries/">Explore Destinations</a></p>
<p><a href="https://disneycruise.disney.go.com/why-cruise-disney/">Why Cruise with Disney</a></p>
</div>
</div>
<div class="container">
<p>Disney Cruise Line</p>
</div>
</div>
Which of those CSS rules did you expect to apply to the links?
The .polaroid color property doesn’t apply, because that only goes for text, not links.
The a.polaroid block only applies to links which have the class="polaroid" attribute directly.
Maybe that last one should be changed to .polaroid a instead?
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.